防抖和节流

没有什么不可能的

已于 2022-08-22 11:26:02 修改

阅读量95

点赞数

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

于 2022-07-14 21:24:30 首次发布

本文链接：https://blog.csdn.net/weixin_51465106/article/details/125731227

版权

防抖节流专栏收录该内容

1 篇文章 0 订阅

订阅专栏

防抖： 延时n秒，只执行最后一次（一次）
        1. 事件函数执行，先创建个定时器
        2. 把逻辑代码放到定时器中
        3. 当函数再次触发，清除定时器
        4. 创建一个新定时器即可

代码示例：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <input id="input" type="text" placeholder="请输入" />
  </body>
</html>
<script>
  let input = document.getElementById("input");
  let t = null;
  input.oninput = function () {
    clearTimeout(t);
    t = setTimeout(() => {
      console.log(input.value);
    }, 1000);
  };
</script>

执行结果就会，在不在输入时只执行最会一次输入。

防抖的封装

节流：间隔n秒，执行一次（多次）
        1. 事件函数执行，先判断有定时器，则直接return
        2. 把逻辑代码放到定时器中
        3. 定时器执行后，置空定时器变量
        4. 下载事件函数执行时，在创建一个新定时器即可

代码示例：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      body {
        height: 2000px;
      }
    </style>
  </head>
  <body></body>
</html>
<script>
  // 节流
    let flag = true;
    window.onscroll = function () {
      if (flag) {
        setTimeout(() => {
          console.log("hello world");
          flag = true;
        }, 1000);
      }
      flag = false;
    };
</script>

我们定义了一个body设置了高度，在滚动时执行节流。

节流的封装

没有什么不可能的

关注

0
点赞
踩
0

收藏

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

1.事件函数执行，先判断有定时器，则直接return。4.下载事件函数执行时，在创建一个新定时器即可。1.事件函数执行，先创建个定时器。3.定时器执行后，置空定时器变量。3.当函数再次触发，清除定时器。2.把逻辑代码放到定时器中。2.把逻辑代码放到定时器中。我们定义了一个body设置了高度，在滚动时执行节流。4.创建一个新定时器即可。执行结果就会，在不在输入时只执行最会一次输入。延时n秒，只执行最后一次（一次）间隔n秒，执行一次（多次）...
复制链接

扫一扫

专栏目录