函数防抖与节流

原创已于 2022-03-09 17:07:00 修改 · 536 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

于 2021-11-09 15:36:22 首次发布

本文深入探讨了JavaScript中的防抖(debounce)和节流(throttle)技术，这两种技术常用于优化事件处理，特别是在性能敏感的场景下，如输入事件监听和窗口滚动。防抖能确保在特定时间间隔后才执行函数，如果在这期间函数被频繁触发，则会重新计时。节流则是在设定的时间间隔内只执行一次函数，忽略多余的触发。通过示例代码，展示了如何实现防抖和节流函数，帮助开发者理解并应用到实际项目中。

   // 防抖 
n秒后在执行该事件，若在n秒内被重复触发，则重新计时
    let input = document.querySelector('input')
    input.oninput = debounce(function() {
        console.log(this.value);
    }, 500)


    function debounce(fn, delay) {
        let t = null
        return function() {
            console.log(t);
            if (t !== null) {
                clearTimeout(t)
            }
            t = setTimeout(() => {
                fn.call(this)
            }, delay);
        }
    }


    // 节流
n秒内只运行一次，若在n秒内重复触发，只有一次生效
    let flag = true
    window.onscroll = throttle(function() {
        console.log('哈哈哈');
    }, 1000)


    function throttle(fn, delay) {
        return function() {
            if (flag) {
                setTimeout(() => {
                    fn.call(this)
                    flag = true
                }, delay);
            }
            flag = false
        }
    }


// 在style中设置
body {
        height: 2000px;
    }