js节流和防抖

最新推荐文章于 2024-06-10 22:18:41 发布

爱长发的短发小二哥

最新推荐文章于 2024-06-10 22:18:41 发布

阅读量131

点赞数 1

文章标签： html5 javascript 前端性能优化

本文链接：https://blog.csdn.net/John_jian_yo/article/details/107179085

版权

节流(Throttle)

按照设定的时间固定执行一次函数，比如200ms一次。注意：固定就是你在mousemove过程中，执行这个节流函数，它一定是200ms（你设定的定时器延迟时间）内执行一次。没到200ms，一定会返回，没有执行回调函数的。

防抖(Debounce)

抖动停止后的时间超过设定的时间时执行一次函数。注意：这里的抖动停止表示你停止了触发这个函数，从这个时间点开始计算，当间隔时间等于你设定时间，才会执行里面的回调函数。如果你一直在触发这个函数并且两次触发间隔小于设定时间，则一定不会到回调函数那一步。


<body>
 <div>节流</div>
 <script>
 window.onload = function () {
  window.addEventListener('scroll',throttleHandle(throttle),false); //监听绑定事件
 }
 
 //节流函数
 function throttleHandle (fn) {
  let timer = null,
   booleanVal = true; // 声明一个变量标志做判断
  return function () {
   if (!booleanVal) {
   return
   } //如果事件正在执行，那么就返回，将布尔值改为false
   booleanVal = false;
   //事件未执行，创建事件
   timer = setTimeout(function() {
   fn.apply(this,arguments);
   booleanVal = true; //事件执行完将布尔值改回
   },300)
  }
 }
 
 //执行函数
 function throttle() {
  var scrollNum = document.documentElement.scrollTop || document.body.scrollTop;
  console.log(scrollNum);
 }
 </script>
</body>

<body>
 <button id="debounce">防抖</button>
 <script>
 window.onload = function () {
  let obtn = document.getElementById('debounce'); //获取按钮
 obtn.addEventListener('click',debounceHandle(debounce),false); //监听绑定事件
 }
 
 //防抖函数
 function debounceHandle (fn) {
  let timer = null;
  return function () {
  clearTimeout(timer); //如果存在事件就清除定时器
  timer = setTimeout(function(){ //如果不存在那么就开启定时器
   fn.call(this,arguments);
  },300)
  }
 }
 
 //执行函数
 function debounce() {
  console.log('防抖');
 }
 </script>
</body>

爱长发的短发小二哥

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js节流和防抖

节流(Throttle)按照设定的时间固定执行一次函数，比如200ms一次。注意：固定就是你在mousemove过程中，执行这个节流函数，它一定是200ms（你设定的定时器延迟时间）内执行一次。没到200ms，一定会返回，没有执行回调函数的。防抖(Debounce)抖动停止后的时间超过设定的时间时执行一次函数。注意：这里的抖动停止表示你停止了触发这个函数，从这个时间点开始计算，当间隔时间等于你设定时间，才会执行里面的回调函数。如果你一直在触发这个函数并且两次触发间隔小于设定时间，则一定不会到回调
复制链接

扫一扫