js中防抖(debounce)和节流(throttle)

1. debounce

防抖：在一定时间段内只有一次有效执行
保证100ms内只有一次有效执行

var controlClass = {
  timer: null,
  mainOperation: function(){
    // 真正要执行的操作
  },
  control: function () {
    clearTimeout(this.timer);
    timer = this.setTimeout(this.mainOperation, 100);
  }
}
// 调用
controlClass.control();

对于window的resize实现防抖

function resizeHandler() {
  console.log("window resize");
}
function debounce(method, delay) {
  var timer = null;
  return function () {
    var context = this;
    var args = arguments;
    clearTimeout(timer);
    timer = this.setTimeout(method.call(context,args), delay)
  };
};
//调用
window.onresize = throttle(resizeHandler, 500);

2. throttle

节流：在没有发生操作的一段时间后，才进行一次有效执行

function throttle(method, intervalTime) {
  var startTime,
        timer;
  return function () {
    if (!startTime) {
      startTime = new Date();
    }
    let currentTime = new Date();
    clearTimeout(timer);
    if (currentTime - startTime >= intervalTime) {
      method.call(this, arguments);
     startTime = currentTime; 
    } else {
      timer = setTimeout(throttle(method, intervalTime), 50);
    }
  }
}

3. lodash中防抖和节流源码分析

这里的代码经常看看哟！
此部分信息参考：https://www.cnblogs.com/wandiao/p/7223269.html

4. 相关requestAnimationFrame未完待续啊。。。这好像是个坑？

参考:张鑫旭老师的文章
本文目的仅仅是为了个人查找阅读等提供方便