什么是防抖和节流?有什么区别?如何实现?

2021-02-02 17:41发布

7条回答
桃酥超好吃
2021-02-04 19:30

1、函数防抖

函数防抖就是我们在一段时间内频繁触发同一个事件,可能会十分的影响性能。想要在一段时间内只触发一次。这就要用到防抖和节流。举个例子,防抖是频繁触发后,1s内没有再触发时才调用事件处理程序。

function debounce(callback, time) {

        var timer;

        //使用闭包,可以避免污染全局变量

        return function () {

            clearTimeout(timer) //清除计时器

            //重新开始计时

            var args = arguments

            timer = setTimeout(() => {

                callback.apply(null, args)

            }, time);

        }

    }

    //测试案例

    var handle = debounce(function (a, b) {

        console.log(a, b)

    }, 1000)

    [removed] = function () {

        handle(12)

    }


2、函数节流

和防抖相对应的就是节流了,节流就是在一段时间内只触发一次!

function throttle(callback, time, immediately) {

        if (immediately) {//是否立即执行一次

            var t;

            return function () {

                //之前没有计时 或 距离上次执行的时间已超过规定的值

                if (!t || Date.now() - t >= time) {

                    callback.apply(nullarguments)

                    //得到的当前时间戳

                    t = Date.now()

                }

            }

        } else {//如果不立即执行一次,那么这个时间让他延迟多长时间后再执行

            var timer;

            return function () {

                if (timer) return

                var args = arguments

                timer = setTimeout(() => {

                    callback.apply(null, args)

                    timer = null

                }, time);

            }

        }

    }



一周热门 更多>