函数防抖节流问题

最新推荐文章于 2022-11-16 22:05:03 发布

王爷的大房子

最新推荐文章于 2022-11-16 22:05:03 发布

阅读量103

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/winyh/p/10727441.html

本文详细解析了函数防抖和函数节流的概念及其实现方式，对比两者在事件频繁触发时的不同处理机制，提供了JavaScript代码示例，帮助读者理解如何在实际编程中应用这些技巧来优化用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.函数防抖和函数节流都是防止某一时间频繁触发，但是这两兄弟之间的原理却不一样

2.函数防抖是某一段时间内只执行一次（如5秒内只执行一次，多次触发重新计时），而函数节流是间隔时间执行（每多少秒内执行一次，无论触发多少次，按照固定频率执行）

【函数防抖】在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。

【函数节流】规定在一个单位时间内，只能触发一次函数。如果这个单位时间内触发多次函数，只有一次生效。

/**
 * @desc 函数防抖
 * @param func 函数
 * @param wait 延迟执行毫秒数
 * @param immediate true 表立即执行，false 表非立即执行
 */
function debounce(func,wait,immediate) {
    let timeout;
    return function () {
        let context = this;
        let args = arguments;

        if (timeout) clearTimeout(timeout);
        if (immediate) {
            let callNow = !timeout;
            timeout = setTimeout(() => {
                timeout = null;
            }, wait)
            if (callNow) func.apply(context, args)
        }
        else {
            timeout = setTimeout(() => {
                func.apply(context, args)
            }, wait);
        }
    }
}

　　　　window.onload = function () {
            
            // 函数防抖
            var timer
            var tar = document.getElementsByTagName("input")[0];
            tar.addEventListener("keyup", function(e){
                let value = e.target.value
                console.log(timer)
                if(timer) clearTimeout(timer)
                timer = setTimeout(() => {
                    console.log({value})
                }, 2000);
            })
        }

        window.onload = function () {
            
            // 函数节流
            var timer = null
            var tar = document.getElementsByTagName("input")[0];
            tar.addEventListener("keyup", function(e){
                var value = e.target.value
                if(!timer){
                    timer = setTimeout(() => {
                        timer = null
                        clearTimeout(timer)
                        console.log({value})
                    },2000)
                }
            })

        }

/**
 * @desc 函数节流
 * @param func 函数
 * @param wait 延迟执行毫秒数
 * @param type 1 表时间戳版，2 表定时器版
 */
function throttle(func, wait ,type) {
    if(type===1){
        let previous = 0;
    }else if(type===2){
        let timeout;
    }
    return function() {
        let context = this;
        let args = arguments;
        if(type===1){
            let now = Date.now();

            if (now - previous > wait) {
                func.apply(context, args);
                previous = now;
            }
        }else if(type===2){
            if (!timeout) {
                timeout = setTimeout(() => {
                    timeout = null;
                    func.apply(context, args)
                }, wait)
            }
        }

    }
}

转载于:https://www.cnblogs.com/winyh/p/10727441.html