js 函数节流和防抖

js 函数节流和防抖

防抖和节流的作用都是防止函数多次调用。区别在于，假设一个用户一直触发这个函数，且每次触发函数的间隔小于wait，防抖的情况下只会调用一次，而节流的 情况会每隔一定时间（参数wait）调用函数。

throttle 节流

节流是将多次执行变成每隔一段时间执行。
每隔一段时间后执行一次，也就是降低频率，将高频操作优化成低频操作。

应用场景

• 触发mousemove事件的时候， 如鼠标移动。
• 触发keyup事件的情况， 如搜索。
• 触发scroll事件的时候， 譬如鼠标向下滚动停止时触发加载数据。
• 页面窗口的resize事件

coding

方法1 节流

// function resizehandler(fn, delay){
//   clearTimeout(fn.timer);
//   fn.timer = setTimeout(() => {
//      fn();
//   }, delay);
// }
// window.onresize = () => resizehandler(fn, 1000);

方法2 闭包 节流

function resizehandler(fn, delay){
    let timer = null;
    return function() {
      const context = this;
      const args=arguments;
      clearTimeout(timer);
      timer = setTimeout(() => {
         fn.apply(context,args);
      }, delay);
    }
 }
 window.onresize = resizehandler(fn, 1000);

debounce 防抖

一段时间内触发事件只执行一次。

应用场景

• 按钮点击事件/input事件，防止用户多次重复提交
• 电话号码输入的验证， 只需停止输入后进行一次。

coding

function resizehandler(fn, delay, duration) {
        let timer = null;
        let beginTime = +new Date();
        return function() {
          const context = this;
          const args = arguments;
          const currentTime = +new Date();
          timer && clearTimeout(timer);
          if ((currentTime - beginTime) >= duration) {
            fn.call(context, args);
            beginTime = currentTime;
           } else {
             timer = setTimeout(() => {
               fn.call(context, args)
             }, delay);
           }
        }
      }

        window.onresize = resizehandler(fn, 1000, 1000);

Demo
CodePen-demo

参考文章
http://www.alloyteam.com/2012...