前端之页面优化——节流与防抖

最新推荐文章于 2024-04-28 13:22:20 发布

云中自有锦书

最新推荐文章于 2024-04-28 13:22:20 发布

阅读量343

点赞数 1

分类专栏：前端文章标签：节流、防抖

本文链接：https://blog.csdn.net/weixin_41282726/article/details/98519861

版权

前端专栏收录该内容

13 篇文章 0 订阅

订阅专栏

防抖

防抖作用就是在事件触发的过程中，不去业务处理，而是等该时间结束后，则马上进行业务处理，这里事件结束后的多长时间去执行业务代码，由我们自己设定的，也就是下面的参数wait,单位毫秒。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>防抖</title>
</head>
<body>
    <button id="debounce">防抖，防抖，防抖</button>
</body>
</html>
<script>
    window.onload = function(){
      let btn = document.getElementById('debounce');
      btn.addEventListener('click',debounceHandle(debounce),false);
    }

   //防抖函数
   function debounceHandle(fn){
     let timerid = null;
     return function(){
       clearTimeout(timerid);   //如果存在事件就清除定时器
       timerid = setTimeout(function(){  //如果不存在那么就开启定时器
          fn.call(this,arguments);
       },300)
     }
   }

  //执行函数
  function debounce(){
       console.log('防抖，防抖，防抖');     
  }
</script>

举个例子，当使用onKeyUp监听input框中的输入，如果用户按住一个6不放，那监听事件一直被触发，浪费性能，如果在一段时间内监听，即1秒看输入多少个6。

上面的函数也就是在300毫秒内，只会触发一次事件。总结：防抖就是在任务频发触发的情况下，只有任务触发的间隔超过指定的时间，任务才会执行。

节流

节流和防抖不同，防抖是在事件结束后一定时间后才会执行业务代码。节流则是事件进行的过程中按一定的频率执行业务代码，这里所说的频率也是我们自己设定，以下参数wait。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>节流</title>
</head>
<style>
  div{
    height: 5000px;
  }
</style>
<body>
    <div>节流,节流,节流</div>
</body>
</html>
<script>
    window.onload = function(){
      window.addEventListener('scroll',throttleHandle(throttle),false);  //监听绑定事件
    }

   //节流函数
   function throttleHandle(fn){
      let timerid = null,
          booleanVal = true;   //声明一个变量做标志
      return function(){
          if(!booleanVal){
            return;
          }//如果事件正在执行，那么就返回，将布尔值改为false
          booleanVal = false;
          //事件未执行，创建事件
          timerid = setTimeout(function(){
          fn.apply(this,arguments);
          boolean = true;  //事件执行完将布尔值改回
          },300)
      }
   }

  //执行函数
  function throttle(){
       var scrollNum = document.documentElement.scrollTop||document.body.scrollTop;
       console.log(scrollNum);     
  }
</script>

假如在一个页面中有任意多张图片，那么就有可能会使用懒加载技术，懒加载就是监听滚动条的位置，那么如果用户一直在滚动，那么事件监听就一直在触发，也是浪费性能。那么节流就是在一定时间间隔内触发一次事件。

云中自有锦书

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端之页面优化——节流与防抖

防抖防抖作用就是在事件触发的过程中，不去业务处理，而是等该时间结束后，则马上进行业务处理，这里事件结束后的多长时间去执行业务代码，由我们自己设定的，也就是下面的参数wait,单位毫秒。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta nam...
复制链接

扫一扫