防抖与节流

最新推荐文章于 2024-07-04 00:25:23 发布

Coco涛涛

最新推荐文章于 2024-07-04 00:25:23 发布

阅读量2.3k

点赞数 3

分类专栏：手写js 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/Jason_yuxuan/article/details/127705772

版权

手写js 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1.防抖与节流为何出现以及是什么？

在日常开发中，我们经常会遇到：如input输入框监听事件，点击按钮事件，鼠标移动事件，视图窗口缩放事件等事件，如果这些事件不做限制的话，会不断触发相应的事件极大的浪费资源，降低前端的性能

这个是时候我们可以引入防抖（debounce) 和节流(throttle) 来帮助我们极大的减少高频事件的触发，减少资源的浪费和提高性能；防抖与节流就是为了防止用户高频率的触发某种操作而产生的

2.防抖

防抖：debounce 就是规定在一定的时间后触发，如果在此时间内事件被触发，则时间重新计算；例如：定义在3秒后触发事件，3秒内你又触发事件，则时间重新计算，从0开始，还是3秒后触发

适合的场景：input输入框的监听，我们只希望最后输入完才会去触发查询相应的事件；还有按钮的点击，我们只希望频繁的点击按钮，在最后一次点击后才会触发事件…

我们拿点击按钮触发事件为例：不加防抖的情况：

index.html文件代码如下：

<!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>
    <button style="color:red;text-align: center;" id="btn">按钮点击我</button>
    <script src="./index.js"></script>
</body>
</html>

index.js代码如下：

// 获取按钮的dom元素并且绑定原生点击事件
let btn=document.getElementById('btn')
btn.addEventListener('click',function(){
    console.log('我被点击了'+Math.random())
})

频繁的点击按钮，会发现控制台频繁的打印信息
在这里插入图片描述
加上防抖函数：

// 获取按钮的dom元素并且绑定原生点击事件
let btn=document.getElementById('btn')
// btn.addEventListener('click',function(){
//     console.log('我被点击了'+Math.random())
// })
// 防抖函数  简单的高阶函数  返回一个函数
const myDebounce=function(fn,delay){
    let timer=null  
    let ctx=this
    let args=arguments
    return function(){
        if(timer) clearTimeout(timer)
        timer=setTimeout(()=>{
            fn.apply(ctx,args)
        },delay)
    }
}
// 改造加上防抖函数
btn.addEventListener('click',myDebounce(function(){
    console.log('我被点击了'+Math.random())
},2000))

此时我们在点击按钮，会发现不管我们如何频繁的点击，控制台并不打印信息，只有停止点击按钮2秒后才会打印出第一条信息

但是我们发现此时并不合理，我们希望第一次点击时一定触发，此后在点击按照2秒后触发才合理，是吧？那么我们改造一下，给防抖函数加一个变量来标识是否是第一次触发，代码如下：

// 获取按钮的dom元素并且绑定原生点击事件
let btn=document.getElementById('btn')
// btn.addEventListener('click',function(){
//     console.log('我被点击了'+Math.random())
// })
// 防抖函数  简单的高阶函数  返回一个函数
const myDebounce=function(fn,delay){
    let timer=null  
    let ctx=this
    let args=arguments
    let firstClick=1
    return function(){
        if(timer) clearTimeout(timer)
        if(firstClick===1){
            fn.apply(ctx,args)
            firstClick++
        }else{
            timer=setTimeout(()=>{
                fn.apply(ctx,args)
            },delay)
        }
    }
}
// 改造加上防抖函数
btn.addEventListener('click',myDebounce(function(){
    console.log('我被点击了'+Math.random())
},2000))

3.节流

节流： throttle，就是在规定的一段时间后一定会执行一次，时间不会重新计算；就是每隔一定时间执行一次的意思。例如：我们定义在3秒后触发事件，就会每隔3秒触发一次事件

适合的场景是：鼠标移动事件或者视图窗口调整需要将多次事件改为一段时间执行一次的事件

这里我们还是以按钮的点击为例：

index.js代码如下：

// 获取按钮的dom元素并且绑定原生点击事件
let btn=document.getElementById('btn')
 
// 节流函数  简单的高阶函数  返回一个函数
const myThrottle=function(fn,delay){
   let flag=true  //作为是否执行的开关阀门
   let ctx=this
   let args=arguments
   let firstFlag=1  //第一次执行
   return function(){
    if(firstFlag===1){
        fn.apply(ctx,args)
        firstFlag++   //第一次可以执行
    }else{
        if(flag){
            setTimeout(()=>{
                fn.apply(ctx,args)
                flag=true
            },delay)
            flag=false
       }
    } 
   }
}
 
// 改造加上节流函数
btn.addEventListener('click',myThrottle(function(){
    console.log('我被点击了'+Math.random())
},2000))