防抖节流(先后)

最新推荐文章于 2024-11-11 08:35:04 发布

原创最新推荐文章于 2024-11-11 08:35:04 发布 · 160 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

防抖节流专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了JavaScript中的防抖(debounce)和节流(throttle)技术，包括它们的区别、实现方式以及在实际开发中的应用，如百度搜索框的防抖效果和窗口大小改变、滚动事件的节流处理。通过设置`immediate`参数，可以控制函数是在事件开始时立即执行还是在事件停止后执行。这些优化技巧能够有效提高页面性能，减少不必要的计算和调用。

防抖(先后) immediate为true(先执行) false(后执行)

应用场景百度搜索框搜索防抖

	 function debounce(func, wait, immediate) {
        let timeout;
        return function () {
            if (timeout) clearTimeout(timeout);
            if (immediate) {
                const callNow = !timeout;
                timeout = setTimeout(function () {
                    timeout = null;
                }, wait)
                if (callNow) func.apply(this, arguments)
            } else {
                timeout = setTimeout(function () {
                    func.apply(this, arguments)
                }, wait);
            }
        }
    }

节流(先后) immediate为true(先执行) false(后执行)

应用场景 resize窗口大小变化事件和滚动条滑动事件做个时间的间隔触发

 function throttle(func, wait, immediate) {
        let timeout;
        debugger
        return function () {
            debugger
            if (!timeout) {
                if (immediate) {
                    func.apply(this, arguments)
                    timeout = setTimeout(function () {
                        timeout = null;
                    }, wait)
                } else {
                    timeout = setTimeout(function () {
                        timeout = null;
                        func.apply(this, arguments)
                    }, wait)
                }


            }

        }
    }