信息发布→ 登录 注册 退出

JavaScript的防抖和节流案例

发布时间:2026-01-11

点击量:
目录
  • 防抖
  • 节流:

防抖:在一定的时间内只执行最后一次任务;

节流:一定的时间内只执行一次;

防抖

<button id="debounce">点我防抖!</button>
 
$('#debounce').on('click', debounce());
 
function debounce() {
    let timer;
    // 闭包
    return function () {
        clearTimeout(timer);
        timer = setTimeout(() => {
            // 需要防抖的操作...
            console.log("防抖成功!");
        }, 500);
    }
}

节流:

<button id="throttle">点我节流!</button>
 
$('#throttle').on('click', throttle());
 
function throttle(fn) {
    let flag = true;
    // 闭包
    return function () {
        if (!flag) {
            return;
        }
        flag = false;
        setTimeout(() => {
            console.log("节流成功!");
            flag = true;
        }, 1000);
    };
}

在线客服
服务热线

服务热线

4008888355

微信咨询
二维码
返回顶部
×二维码

截屏,微信识别二维码

打开微信

微信号已复制,请打开微信添加咨询详情!