开源节流和去抖

最新推荐文章于 2023-09-17 18:17:11 发布

HumanQualityMan

最新推荐文章于 2023-09-17 18:17:11 发布

阅读量356

点赞数

本文链接：https://blog.csdn.net/zhangyizuishuai/article/details/111351853

版权

节流

<!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>
      <input type="text" id="ipt">
      <!-- 开源节流 -->
      <script>
            // 节流 : 省钱 ;
            // 减少程序的运行次数; 

            // 在固定间隔事件之内只能执行一次;

            var count = 0;
            // 表示是否存在定时器;
            var t = null;
            document.getElementById("ipt").oninput = function(){
                  // console.log(count);
                  // 这时候有程序在100毫秒之内执行过,不需要再次执行了;

                  if( t !== null ){
                        return false;
                  }
                  t = setTimeout( function(){
                        count ++;
                        console.log(count);
                        // 程序100毫秒时间间隔已过，可以继续执行程序了。
                        // 我们改变t的状态就可以了。
                        t = null;
                  } , 500)
            }
            // 什么叫做函数节流 : 
            // 1. 是在高频词执行的函数之中;
            // 2. 在函数执行的时候开启一个定时器，记录程序的执行状态;
            // 3. 如果程序执行，判断上一个定时器是否执行完成，如果执行完成那么我们可以重新执行程序，如果没有完成，就跳出程序;
            
// 定义一个变量t=null,给一个if条件判断如果t！=null的时候,就return一个false，因为一开始我们给的t=null所以不会终止,然后我们 在写t=一个定时器,在定时器里面写ajax请求,
// 请求完之后再把t赋值回null
// 节流就是写一个定时器,让他在固定的时间内只发送一次请求.并且是第一次定时器的请求
      </script>
</body>
</html>
<!-- 节流是变量的赋值改变,去抖是定时器的清除. -->

去抖

<!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>
      <input type="text" id="ipt">
      <script>
            // 函数去抖是一种心态，修行;
            // 如果函数重复执行，那么就清空计时重新记录;
            var count = 0;
            var t = null;
            document.getElementById("ipt").oninput = function(){
                  clearInterval(t);
                  t = setTimeout( function(){
                        console.log("执行");
                  } , 500)
            }
            // 效果就是一直输入字,知道输入的字结束以后才会执行console.log("执行");
      // 比在做模糊搜索的时候,里面的input事件,我们不需要让他每输入一个字就发送一个ajax请求,
      // 我们就可以使用去抖的方式去优化网页,就是让用户输入最后一个字1秒之后才发送一个ajax请求
      // 实现的原理就是内部采用了清除上一个还没有执行的定时器的原理,如果你一直输入文字,并且产生的上一个定时器没能执行，
      // 那么就会清除掉定时器
      // 直到你最后一次输入内容就不清楚上一次的定时器
      </script>
</body>
</html>