js 函数节流与防抖@关尔先生

js 不必要的事件频繁触发是很大的开销，可以通过节流或防抖函数来控制发生频率

以页面滚动事件为例

document.getElementById('body').onscroll = function () {
  console.log('频繁执行');
};

节流（连续事件，固定时间内只执行一次）

var doNext = true;
document.getElementById('body').onscroll = function () {
  if (!doNext) {
    return;
  }
  setTimeout(function () {
    console.log('函数节流');
    doNext = true;
  }, 300);
  doNext = false;
};

防抖（间隔不超过规定时间的连续事件，只在最后一次生效）

var timer = false;
document.getElementById('body').onscroll = function () {
  clearTimeout(timer); //间隔不到300ms，取消上一次事件，重新订阅
  timer = setTimeout(function () {
    console.log('函数防抖');
  }, 300);
};

---

编辑文章✏