React中事件节流防抖

Posted 2023-04-06

参考技术A 方法一

方法二

写法类似。。。

debounce 和 throttle 各有特点，在不同的场景要根据需求合理的选择。如果事件触发是高频但是有停顿时，也就是结束后一段时间内触发一次，期间如果再次触发，计时刷新，直到该段时间过后触发，可以选择debounce；在事件连续不断高频触发时，一段时间内最多触发一次，只能选择 throttle ，因为 debounce 可能会导致一段时间内动作只被执行一次，界面出现闪烁。

防抖和节流

在开发中我们经常需要绑定一些持续触发的事件，如： resize、scroll、mousemove等等，但是我们并不希望在事件触动的过程中去频繁的执行绑定的函数，在这种情况下我们一般有两种解决办法，就是防抖和节流。

防抖

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

// 防抖
    function debounce(func, wait) {
        let timeout;
        return function() {
            let context = this;
            let args = arguments;
            if (timeout) {
                clearTimeout(timeout);
            }
            timeout = setTimeout(function () {
                func.apply(context,args);
            },wait);
        };
    };
    /*使用*/
    window.onscroll = debounce(function () {
        console.log(‘debounce‘);
    }, 1000);

 

节流

是指连续触发事件但是在 n 秒中只执行一次函数。

function throttle(func, delay) {
        let prevTime = Date.now();
        return function() {
            let curTime = Date.now();
            if (curTime - prevTime > delay) {
                func.apply(this, arguments);
                prevTime = curTime;
            }
        };
    };
    /*使用*/
    window.onscroll = throttle(function () {
        console.log(‘throttle‘);
    }, 1000);

 

区别：防抖是在练连续事件完全触发完成之后，只调用一次。节流是在一定时间内只执行一次。