js 节流和防抖

最新推荐文章于 2025-10-17 19:44:31 发布

原创最新推荐文章于 2025-10-17 19:44:31 发布 · 94 阅读

CC 4.0 BY-SA版权

节流

  const debounce =  ( fn,delay) => {
        let timerId;
        return (...args) => {
            if (timerId) {
                clearTimeout(timerId);
            }
            timerId = setTimeout(() => {
                fn(...args);
                timerId = null;
            }, delay);
        }
    }
    document.addEventListener('scroll', debounce((e) => {
        console.log(123);
    }, 300));

防抖

第一次执行

	// 防抖
   const debounce = (fn,delay = 500,imm = true) => {
        let timer;
        return (...args) => {
            if (timer) {
                clearTimeout(timer);
            }
            if (imm) {
            	if(!timer){
            		fn.apply(this,...args);
            	}
            	timer = setTimeout(()=>{
            		timer = null;
            	},1000)
            }else{
	            timer = setTimeout(() => {
	                fn.apply(this,...args);
	                timer = null;
	            }, delay);
            }
        }
    }
    // 需要执行事件
    const implement = debounce((e) => {
    	console.log(123123);
    }, 1000);
    // 把执行事件赋值
    const imple = debounce(implement);
    // 绑定的事件
    window.addEventListener('scroll',imple);

延迟后执行


	// 防抖
   const debounce = (fn,delay = 500) => {
        let timerId;
        return (...args) => {
            if (timerId) {
                clearTimeout(timerId);
            }
            timerId = setTimeout(() => {
                fn.apply(this,...args);
                timerId = null;
            }, delay);
        }
    }
    // 需要执行事件
    const implement = debounce((e) => {
    	console.log(123123);
    }, 1000);
    // 把执行事件赋值
    const imple = debounce(implement);
    // 绑定的事件
    document.getElementById('btn').addEventListener('click',imple);