什么是防抖和节流?有什么区别? JavaScript中防抖和节流的区别及适用场景

君哥 阅读:1946 2018-12-26 15:27:53 评论:0

作用:节流和防抖作为页面性能优化的一种策略,可以降低回调函数的执行频率,节省计算资源,能有效减少浏览器引擎的损耗,防止出现页面堵塞卡顿现象。

一、节流:简单地说,就是限制一个动作在一段时间内只能执行一次

打个比方,好比我们打英雄联盟或者王者荣耀的时候,释放技能都有一段冷却时间,比如Q技能有5秒的冷却时间,那么我们在5秒钟的时间内只能释放一次Q技能。

一般使用场景:

1、scroll 事件,每隔一秒计算一次位置信息等

2、input 框实时搜索并发送请求展示下拉列表,每隔一秒发送一次请求

代码实现:

function throttle (fn,delay){
    let timer = null
    return ()=>{
        if (timer){return}
        timer = setTimeout(() => {
            fn.apply(this,arguments)
            timer = null
        }, delay);       
    }}


二、防抖:简单地说,就是 当一个动作连续触发,只执行最后一次。

还是举一个英雄联盟中的例子,比如你按下了回城键,那么在8秒钟之后,就会执行回城事件,但如果你再次按下回城键,那么回城时间又将重新计时,需要在等8秒才会执行回城事件。

一般使用场景:

1、登录、发短信等按钮避免用户点击太快,以致于发送了多次请求,需要防抖

2、调整浏览器窗口大小时,resize 次数过于频繁,造成计算过多,此时需要一次到位,就用到了防抖

代码实现:

function debounce(fn,delay){
    let timer = null
    return ()=>{
        if(timer){
            clearTimeout(timer)
        }
        timer = setTimeout(() => {
            fn.apply(this,arguments)
            timer = null
        }, delay);
    }}


本文链接:https://www.yanjun202.com/post/18.html 

分享到:
可以去百度分享获取分享代码输入这里。
发表评论
搜索
排行榜
关注我们

扫一扫关注我们,了解最新精彩内容