节流和防抖的原理以及实现代码

最新推荐文章于 2024-03-29 09:30:00 发布

雾眠气泡水@

最新推荐文章于 2024-03-29 09:30:00 发布

阅读量3.1k

点赞数

分类专栏： es6 文章标签： javascript es6

本文链接：https://blog.csdn.net/m0_60489011/article/details/120554631

版权

es6 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1.节流

1）节流的原理：

节流就是控制高频事件发生的触发次数。

a. 我们先在html文件中写出一个滚动事件来，打开浏览器之后，当我们滚动鼠标一次，浏览器的控制台中就会触发十几条滚动事件，由于触发次数太频繁，所以，我们需要控制这个触发次数，我们可以不用鼠标滚动的次数来当作触发事件，我们可以用滚动的时间来控制触发事件的次数。

<script>
   // 创建滚动事件
   window.onscroll = function(){
        console.log('滚动');
    } 
</script>

b. 其次，我们给全局定义一个变量flag，当变量为true时，执行间歇调用函数setTimeout()，当flag为false时，停止执行超时调用。

【注意：在超时调用函数里必须要写flag=true，因为只有这样，当触发滚动事件的时候，会继续执行事件的输出；当没有触发滚动事件时，由于有flag=false，就不会输出事件】

<script>
   let flag = true;
   // 创建滚动事件
   window.onscroll = function(){
   // console.log('滚动');
   // 立一个条件，当条件成立时，进入if执行超时调用
   if(flag){
       setTimeout(()=>{
            console.log('滚起来了');
            flag=true;
       },1000)
    }
    flag=false;
 } 
</script>

2）节流的封装

当写好节流时，我们需要经常用到节流，所以我们应该将其封装起来，以便之后使用。

<script>
    // 节流：控制高频事件的触发次数
    window.onscroll = throttle(function(){
       console.log('滚动',this);
    },1000)
    function throttle(fn,delay){
       let flag=true;
       return function(){
       // 当flag为true时，鼠标滚动时会计数
       // 每搁1秒发送一次
       console.log(this);
       if(flag){
          setTimeout(()=>{
              fn.call(this)
              flag=true;
          },delay)
       }
       // 当flag为false
       flag=false
       }
    }
</script>

2.防抖

1）防抖的原理

防抖就是获取高频事件的最后一次执行结果。

a.我们在html文件的<body>标签里写下面的代码，会发现，放我们在输入框内打一个字母是会向后台执行一次结果。若我们在输入框内输入一句话的时候，那会执行很多次，所以我们仅需要得到我们输入完的最后一次结果，原理和节流一样，将执行结果的触发事件从输入多少个字母就执行一次结果变成过多少事件执行一次结果。

<input type="text">
<script>
   // 获取input标签
   const input = document.querySelector('input');
   // 将事件绑定到input标签上
   input.oninput = function(){
        console.log(this.value);
   }
</script>

b. 因此我们需要箭头函数和超时调用来实现防抖的效果。定义一个变量timer，这个变量相当于输入框输入的东西，所以，当输入框有东西时，我们执行

<input type="text">
<script>
   // 获取input标签
   const input = document.querySelector('input');
   // 将事件绑定到input标签上
   let timer;
   input.oninput = function(){
       if(timer){
           // 清除超时调用
           clearTimeout(timer);
        }
        // 超时调用
        timer = setTimeout(()=>{
           console.log(this.value);
        },1000)
    }
</script>

2）防抖的封装

当写好防抖时，我们需要经常用到防抖，所以我们应该将其封装起来，以便之后使用。

<input type="text">
<script>
    const input=document.querySelector('input');
    // 封装函数
    input.oninput=debounce(function(){
       console.log(this.value);
    },1000)
    // fn：回调函数  delay：时间间隔
    function debounce(fn,delay){
       let timer;//闭包
       // 返回函数
       return function(){
          if(timer){
              clearTimeout(timer)
          }
          timer=setTimeout(()=>{
              // 手动改this指向，用call方法
              fn.call(this)
          },delay)
       }
     }
</script>

雾眠气泡水@

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
节流和防抖的原理以及实现代码

1.节流1）节流的原理：节流就是控制高频事件发生的触发次数。 a. 我们先在html文件中写出一个滚动事件来，打开浏览器之后，当我们滚动鼠标一次，浏览器的控制台中就会触发十几条滚动事件，由于触发次数太频繁，所以，我们需要控制这个触发次数，我们可以不用鼠标滚动的次数来当作触发事件，我们可以用滚动的时间来控制触发事件的次数。<script> // 创建滚动事件 window.onscroll = function(){ co...
复制链接

扫一扫