JavaScript节流函数和函数防抖 - 《JavaScript开发文档》

节流函数
函数防抖
总结

节流函数

在我们开发的JavaScript操作中，有时候需要操作到页面的dom结构，同时JavaScript不提倡多次直接操作dom结构是因为操作dom结构会带来性能的丢失。如果像onresize这样的函数多次操作dom结构可能会导致浏览器奔溃，所以为了绕开这个问题，我们需要使用定时器对函数进行节流。

例如一个onresize函数

window.onresize = function(){
    var div = document.getElementById('Div');
  div.style.height = div.offsetWidth + 'px';
}

如果不断改变浏览器的大小，那么这个函数将会不断地执行、重绘，浏览器性能也随之下降。
我们就需要使用定时器给这个函数一定的时间延迟


function resizeDiv(){
    var div = document.getElementById('Div');
  div.style.height = div.offsetWidth + 'px';
}
function throttle(fn, delay, scope) {
    let timer;
    return function () {
        let context = scope || this, args = arguments;
        if (!timer) {
            timer = setTimeout(function () {
                fn.apply(context, args);
                timer = null;
            }, delay)
        }
    }
}
作者：JarvisJie
链接：https://juejin.im/post/5c00f7fe51882516be2ee2fc
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
window.onresize = function(){
    thorttle(resizeDiv());
}

els[2].addEventListener('scroll', throttle(function handle() {
        console.log(Date.now(),', 执行滚动事件!（函数节流） count3=', ++count3);
    }, 200));

函数防抖

function debounce(fn, delay, scope) {
    let timer = null;
    // 返回函数对debounce作用域形成闭包
    return function () {
        // setTimeout()中用到函数环境总是window,故需要当前环境的副本；
        let context = scope || this, args = arguments;
        // 如果事件被触发，清除timer并重新开始计时
        clearTimeout(timer);
        timer = setTimeout(function () {
            fn.apply(context, args);
        }, delay);
    }
}

作者：JarvisJie
链接：https://juejin.im/post/5c00f7fe51882516be2ee2fc
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

//调用
window.onresize = throttle(myFunc,1000);

上诉的代码说明，调整大小的功能被放入了一个叫做 resizeDiv()的单独函数中。然后 onresize 事件处理程序调用 throttle()并传入 resizeDiv 函数，而不是直接调用 resizeDiv()。多数情况下，用户是感觉不到变化的，虽然给浏览器节省的计算可能会非常大。

简单来说，实现的功能就是在一定的时间内，限制某个函数只执行一次。

 els[0].addEventListener('scroll', function handle() {
        console.log('普通滚动事件！count1=', ++count1);
    });
    els[1].addEventListener('scroll', debounce(function handle() {
        console.log('执行滚动事件!（函数防抖） count2=', ++count2);
    }, 200));

作者：JarvisJie
链接：https://juejin.im/post/5c00f7fe51882516be2ee2fc
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

总结

函数节流和函数防抖的基本区别就是函数再次执行是是否清空上次的函数

函数节流执行时，只会添加一个定时器，类似于延时执行，执行完毕之后将会清空这个timer，若timer还没有清空，那么将不会重新覆盖掉
函数防抖则是在函数执行的时候直接清空掉timer，并且重新赋值一个，其目的就是为了只在最后一次定时器完成时才执行方法