JavaScript的防抖和节流案例

目录

• 防抖
• 节流：

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

节流：一定的时间内只执行一次；

防抖

<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);
    };
}

到此这篇关于JavaScript的防抖和节流案例的文章就介绍到这了,更多相关JavaScript防抖和节流内容请搜索华域联盟以前的文章或继续浏览下面的相关文章希望大家以后多多支持华域联盟！

您可能感兴趣的文章:

• 关于JavaScript防抖与节流的区别与实现
• JavaScript防抖与节流详解
• JavaScript 防抖和节流详解
• web项目开发之JS函数防抖与节流示例代码
• JS防抖节流函数的实现与使用场景
• 浅谈JavaScript节流与防抖

本文由 华域联盟 原创撰写：华域联盟 » JavaScript的防抖和节流案例

转载请保留出处和原文链接：https://www.cnhackhy.com/72846.htm