防抖和节流

你是哪只小蚂蚁

已于 2022-06-18 20:12:00 修改

阅读量74

点赞数

文章标签： javascript 前端开发语言

于 2022-06-18 20:10:19 首次发布

本文链接：https://blog.csdn.net/qq_45739639/article/details/125351124

版权

防抖和节流

防抖

频繁触发某个操作时，只执行最后一次。当持续触发一个事件时，在一定时间内，事件没有再触发，才执行回调函数。如果又触发了时间，就重新计时。

类比坐电梯，如果电梯门快要关闭，有一个人要进电梯，电梯门会重新开始计时关闭。没有人在坐就关闭电梯，电梯运行（看其他小伙伴们说到的坐电梯，这个例子真的很清晰

防抖原理

<body>
  <button>防抖原理</button>
  <script src="./lodash.min.js"></script>
  <script>
    let btn=document.querySelector('button')
    //lodash实现-防抖
    btn.addEventListener('click',debounce(function(){
      console.log(2);
    },500))
    //3 防抖原理
    let timer;
    btn.addEventListener('click',function(){
      //执行当前这个定时器之前,先清除掉之前的定时器
      clearTimeout(timer)
      //定时器执行某串代码,单位事件内多次触发,取消上一次的定时器
      timer=setTimeout(()=>{
        console.log(3);
      },500)
    })
  </script>
</body>

节流

单位时间内，频繁触发同一个操作，只会触发一次。不管事件触发有多频繁，都会保证在设定事件内执行一次回调函数

节流原理

<body>
  <button>节流原理</button>
  <script>
    //点击按钮,输出1
    let btn=document.querySelector('button')
    //2 lodash绑定-节流
    btn.addEventListener('click',function(){
      console.log(2);
    },1500)
    //3 节流原理
    let startTime=0
    btn.addEventListener('click',function(){
      // 获取当前时间
      let nowTime=Date.now()
      // 如果间隔时间超过1500就触发某个逻辑
      if(nowTime-startTime>1500){
        console.log(3);
        //修改上一次的触发时间
        startTime=nowTime
      }
    })
    //节流原理
    let bool = false; // 控制器
        btn.addEventListener('click', function () {
            // 判断，要不要开启一个新的延时器
            if (bool) {
                return;
            }
            console.log(4);
            bool = true; // 设置为true，这样再点击就没法执行定时器了
            setTimeout(function () {
                // 1500后，回复点击效果
                bool = false;
            }, 1500);
        });
  </script>
</body>

你是哪只小蚂蚁

关注

0
点赞
踩
0

收藏

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

频繁触发某个操作时，只执行最后一次。当持续触发一个事件时，在一定时间内，事件没有再触发，才执行回调函数。如果又触发了时间，就重新计时。类比坐电梯，如果电梯门快要关闭，有一个人要进电梯，电梯门会重新开始计时关闭。没有人在坐就关闭电梯，电梯运行（看其他小伙伴们说到的，这个例子真的很清晰防抖原理节流单位时间内，频繁触发同一个操作，只会触发一次。不管事件触发有多频繁，都会保证在设定事件内执行一次回调函数节流原理......
复制链接

扫一扫