2、防抖和节流

最新推荐文章于 2024-09-07 14:37:16 发布

eazdp

最新推荐文章于 2024-09-07 14:37:16 发布

阅读量122

点赞数

分类专栏：每日一点文章标签： javascript es6 vue.js node.js html

本文链接：https://blog.csdn.net/qq_29721837/article/details/108075890

版权

每日一点专栏收录该内容

5 篇文章 0 订阅

订阅专栏

防抖：动作绑定事件，动作发生后一定时间后触发事件，在这段时间内，如果该动作又发生，则重新等待一定时间再触发事件。

例如用户频繁点击，只需要响应一次即可

节流：动作绑定事件，动作发生后一段时间后触发事件，在这段时间内，如果动作又发生，则无视该动作，直到事件执行完后，才能重新触发。

例如监听窗口resize和scroll事件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="content" style="height:150px;line-height:150px;text-align:center; color: #fff;background-color:#ccc;font-size:80px;"></div>
  <script>
    // 防抖 计时器
    function debounce (fn, delay = 500) {
      let timer = null;
     
      return () => {
        clearTimeout(timer);
        timer = setTimeout(() => {
          fn.apply(this, arguments);
        }, delay);
      }
    }

    // 节流 计时器
    function throtte1(fn, delay = 500) {
      let timer = null;
      
      return () => {
        if(timer) return;
        timer = setTimeout(() => {
          fn.apply(this, arguments);
          timer = null;
        }, delay)
      }
      
    }

    // 节流 开关
    function throtte2(fn, delay = 500) {
      let isOk = true;
      return () => {
        if(!isOk) return;
        isOk = false;
        setTimeout(() => {
          fn.apply(this, arguments);
          isOk = true;
        }, delay)
      }
    }

    // 节流 时间差值判断
    function throtte3 (fn, delay = 500) {
      let pre = Date.now();
      return () => {
        let cur = Date.now();
        if(cur - pre > delay){
          setTimeout(() => {
            fn.apply(this, arguments);
            pre = Date.now();
          })
        }
      } 
    }


    let num = 1;
    let content = document.getElementById('content');

    function count() {
        content.innerHTML = num++;
    };
    content.onmousemove = throtte3(count, 1000);

  </script>
</body>
</html>

eazdp

关注

0
点赞
踩
0

收藏

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

防抖：动作绑定事件，动作发生后一定时间后触发事件，在这段时间内，如果该动作又发生，则重新等待一定时间再触发事件。例如用户频繁点击，只需要响应一次即可节流：动作绑定事件，动作发生后一段时间后触发事件，在这段时间内，如果动作又发生，则无视该动作，直到事件执行完后，才能重新触发。例如监听窗口resize和scroll事件<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"&.
复制链接

扫一扫

专栏目录