节流和防抖的个人见解

关注

转载最新推荐文章于 2026-03-29 23:23:58 发布 136 阅读 AI 写同款· GEO 优化 ›

前端防抖和节流提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录@[TOC](文章目录)一、防抖（debounce）非立即执行版：立即执行版：双剑合璧版：二、节流（throttle）1.时间戳版：2.定时器版:双剑合璧版: 提示：以下是本篇文章正文内容，下面案例可供参考一、防抖（debounce）所谓防抖，就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。防抖的应用场景很多： 1.输入框中频繁的输入内容，搜索或者提交信息； 2.频繁的点. 阅读详情

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

function debounce(func, wait) {
    let timer;

    return function () {
        const context = this;
        const args = arguments;

        if (timer) {
            clearTimeout(timer);
        }
        
        timer = setTimeout(() => {
            func.apply(context, args)
        }, wait);
    }
}

// 只有在触发事件后的n秒内不再次触发事件，才会执行函数
const deFunc = debounce(func, 1000);

节流（throttle），是指连续触发事件，但在n秒内只执行一次函数，稀释函数的执行频率。

// 定时器
function throttle (func, wait) {
    let timer;

    return function () {
        const context = this;
        const args = arguments;

        if (!timer) {
            timer = setTimeout(() => {
                timer = null;
                func.apply(context, args);
            }, wait);
        }        
        
    }
}

// 时间戳
function throttle (func, wait) {
    let previous = 0;

    return function () {
        const context = this;
        const args = arguments;
        const current = new Date();
        
        if (current - previous > wait) {
            func.apply(context, args);
            previous = current;
        }
    }
}

// 事件连续触发，但函数每隔n秒执行一次
const thFunc = throttle(func, 1000);

收录于