前端防抖和节流

Posted 2022-10-31 MikrokosmosRun

目录

• 一、防抖（debounce）
• • 非立即执行版：
  • 立即执行版：
  • 双剑合璧版：
• 二、节流（throttle）
• • 1.时间戳版：
  • 2.定时器版:
  • 双剑合璧版:

提示：以下是本篇文章正文内容，下面案例可供参考

一、防抖（debounce）

所谓防抖，就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。

防抖的应用场景很多：
1.输入框中频繁的输入内容，搜索或者提交信息；
2.频繁的点击按钮，触发某个事件；
3.监听浏览器滚动事件，完成某些特定操作；
4.用户缩放浏览器的resize事件；
总之，密集的事件触发，我们只希望触发比较靠后发生的事件，就可以使用防抖函数；

防抖函数分为非立即执行版和立即执行版。

非立即执行版：

function debounce(func, wait) 
    let timeout;
    return function () 
        let context = this;
        let args = arguments;

        if (timeout) clearTimeout(timeout);
        
        timeout = setTimeout(() => 
            func.apply(context, args)
        , wait);
    

非立即执行版的意思是触发事件后函数不会立即执行，而是在 n 秒后执行，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。

立即执行版：

function debounce(func,wait) 
    let timeout;
    return function () 
        let context = this;
        let args = arguments;

        if (timeout) clearTimeout(timeout);

        let callNow = !timeout;
        timeout = setTimeout(() => 
            timeout = null;
        , wait)

        if (callNow) func.apply(context, args)
    

立即执行版的意思是触发事件后函数会立即执行，然后 n 秒内不触发事件才能继续执行函数的效果。

在开发过程中，我们需要根据不同的场景来决定我们需要使用哪一个版本的防抖函数，一般来讲上述的防抖函数都能满足大部分的场景需求。但我们也可以将非立即执行版和立即执行版的防抖函数结合起来，实现最终的双剑合璧版的防抖函数。

双剑合璧版：

/**
 * @desc 函数防抖
 * @param func 函数
 * @param wait 延迟执行毫秒数
 * @param immediate true 表立即执行，false 表非立即执行
 */
function debounce(func,wait,immediate) 
    let timeout;

    return function () 
        let context = this;
        let args = arguments;

        if (timeout) clearTimeout(timeout);
        if (immediate) 
            var callNow = !timeout;
            timeout = setTimeout(() => 
                timeout = null;
            , wait)
            if (callNow) func.apply(context, args)
        
        else 
            timeout = setTimeout(function()
                func.apply(context, args)
            , wait);
        
    

二、节流（throttle）

所谓节流，就是指连续触发事件但是在 n 秒中只执行一次函数。节流会稀释函数的执行频率。

节流的应用场景：
1.监听页面的滚动事件；
2.鼠标移动事件；
3.用户频繁点击按钮操作；
4.游戏中的一些设计；
总之，依然是密集的事件触发，但是这次密集事件触发的过程，不会等待最后一次才进行函数调用，而是会按照一定的频率进行调用；

对于节流，一般有两种方式可以实现，分别是时间戳版和定时器版。

1.时间戳版：

function throttle(func, wait) 
    let previous = 0;
    return function() 
        let now = Date.now();
        let context = this;
        let args = arguments;
        if (now - previous > wait) 
            func.apply(context, args);
            previous = now;
        
    

2.定时器版:

function throttle(func, wait) 
    let timeout;
    return function() 
        let context = this;
        let args = arguments;
        if (!timeout) 
            timeout = setTimeout(() => 
                timeout = null;
                func.apply(context, args)
            , wait)
        

    

可以看到，在持续触发事件的过程中，函数不会立即执行，并且每 1s 执行一次，在停止触发事件后，函数还会再执行一次。

我们应该可以很容易的发现，其实时间戳版和定时器版的节流函数的区别就是，时间戳版的函数触发是在时间段内开始的时候，而定时器版的函数触发是在时间段内结束的时候。

同样地，我们也可以将时间戳版和定时器版的节流函数结合起来，实现双剑合璧版的节流函数。

双剑合璧版:

/**
 * @desc 函数节流
 * @param func 函数
 * @param wait 延迟执行毫秒数
 * @param type 1 表时间戳版，2 表定时器版
 */
function throttle(func, wait ,type) 
    if(type===1)
        let previous = 0;
    else if(type===2)
        let timeout;
    
    return function() 
        let context = this;
        let args = arguments;
        if(type===1)
            let now = Date.now();

            if (now - previous > wait) 
                func.apply(context, args);
                previous = now;
            
        else if(type===2)
            if (!timeout) 
                timeout = setTimeout(() => 
                    timeout = null;
                    func.apply(context, args)
                , wait)