函数节流与防抖

欢迎访问我的博客地址 : 博客地址

  那么问题来了,什么是函数节流？什么是函数防抖？

1.函数节流

函数节流：一个函数执行一次后,只有大于设定的时间周期才会执行第二次,限制一个函数在一定时间内只能执行一次。
场景：有个需要频繁触发的函数,出于性能优化角度，在规定的时间内,只让函数触发的第一次生效，后面的不生效。

/*
节流函数：throttleFn
fn:   要被节流的函数
delay：规定的时间
*/
    function throttleFn(fn, delay) {
        // 记录上一次触发的时间
        var lastTime = 0;
        // 通过闭包的方式使用lasttime变量，每次都是上次的时间
        return function () {
            var nowTime = Date.now();
            if (nowTime - lastTime > delay) {
                // 修正this函数问题
                fn.call(this);
                // 同步时间
                lastTime = nowTime;
            }
        }
    }
    document.onscroll = throttleFn(() => {
        console.log("滚动事件被触发了" + Date.now());
    }, 3000)

  当滚动屏幕时控制台打印当前时间戳,虽然是一直滚动屏幕,但也是在时间周期3s后才会第二次输出当前时间戳,由此实现了函数的节流。

2.函数防抖

函数防抖：一个需要频繁触发的函数，在规定时间内只让最后一次生效，前面不生效。就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。
  比如移动端input框输入时，输入结束一定时间后才知道用户输入结束，此时取输入的内容最为合适。

/*
antiShakeFn
fn:   要被防抖的函数
delay：规定的时间
*/
function antiShakeFn(fn, delay) {
        // 记录上一次的延时器
        var timer = null;
        return function () {
            // 清除上一延时器
            clearTimeout(timer)
            // 重新设置新的延时器
            timer = setTimeout(function () {
                fn.apply(this)
            }, delay)
        }
    }

document.getElementById('button').onclick = antiShakeFn(() => {
    console.log('点击事件被触发了' + Date.now());
}, 3000)

  最后一次点击按钮设定的时间3s后控制台才会输出当前时间戳,而正常情况是用户点击依次输出依次。

3.节流与防抖区别

1.函数防抖antiShakeFn,在一段连续操作结束后,处理回调,利用 clearTimeout 和 setTimeout 实现。
2.函数节流throttleFn,在一段连续操作中,每一段时间只执行一次,频率较高的事件中使用来提高性能。
3.函数防抖antiShakeFn在一定时间连续触发,只在最后执行一次,而函数节流throttleFn侧重于一段时间内只执行一次。

4.应用场景

1.函数防抖的应用场景

连续的事件，只需触发一次回调的场景有： 连续的事件，只需触发一次回调的场景有：

1.搜索框搜索输入,只需用户最后一次输入完,再发送请求。
2.手机号、邮箱验证输入检测。
3.窗口大小resize(),只需窗口调整完成后,计算窗口大小,防止重复渲染。

2.函数节流的应用场景

间隔一段时间执行一次回调的场景有：

1.滚动加载,加载更多或滚到底部监听。
2.高频量点击提交,表单重复提交。