关尔先生·南山桥

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);
};

本文链接： http://www.nanshanqiao.com/zz_article/67.html

js 函数节流与防抖 笔记

js节流防抖

js 函数节流与防抖笔记

js 节流防抖