js 函数节流与防抖 笔记

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

关尔先生2020-11-12 15:36:00
一、以页面滚动事件为例

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

js节流防抖

上一篇:jquery 点击元素之外的区域

下一篇:js base64对称性加密:web Api 接口——window.btoa

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

暂无评论