1.防抖：n 秒后在执行该事件，若在 n 秒内被重复触发，则重新计时。代码实现重在清零 clearTimeout。
　　应用：登录，提交，浏览器窗口的resizes事件，文本编辑保存 
//防抖函数
    function debounce (f, wait) {
　　　　　//设置一个定时器
        let timer; 
        return (...args) => {   
　　　　　//单位时间内再次点击将把未来的发生的点击事件扼杀在摇篮之中，并重新计时，类似中断回城             
            clearTimeout(timer)             
            timer = setTimeout(() => {      
                f(...args)
            }, wait)
        }
    }
let count = 0;
let divEl = document.getElementById("submitBtn");
//真正执行的请求时间
function moveFn(){
   console.log('ajax请求:'+count++)
}
//divEl.addEventListener("click", moveFn,false)
divEl.addEventListener("click", debounce(moveFn, 3000));

 
2.节流：n 秒内只运行一次，若在 n 秒内重复触发，只有一次生效，响应平滑。
　　应用：scroll 事件，input的实时搜索 
function throttle(func, wait) {
　　// 记录上一次执行 func 的时间
    let prev = 0
    return function (...args) {
　　　　　　// 当前触发的时间（时间戳）
        const now = Number(new Date())
　　　　　　// 只有当当前时间超过上次点击单位时长后才去执行方法func，类似在公交车站等公交
        if (now >= prev + wait) {
　　　　　　　　// 符合条件执行 func 时，需要更新 prev 时间
            prev = now
            func.apply(this, args)
        }
    }
}
divEl.addEventListener("click", throttle(moveFn, 1000));

 

3.通俗易懂的接地气的防止重复点击的写法

let canCLick = true
divEl.addEventListener("click",()=>{
    if(canCLick){
        canCLick = false
        console.log('提交')
        setTimeout(function(){
            canCLick = true
        },1000)
    }
});

原文地址：http://www.cnblogs.com/yd15321/p/16829188.html

1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！ 2. 分享目的仅供大家学习和交流，请务用于商业用途! 3. 如果你也有好源码或者教程，可以到用户中心发布，分享有积分奖励和额外收入！ 4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！ 5. 如有链接无法下载、失效或广告，请联系管理员处理！ 6. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！ 7. 如遇到加密压缩包，默认解压密码为"gltf",如遇到无法解压的请联系管理员！ 8. 因为资源和程序源码均为可复制品，所以不支持任何理由的退款兑现，请斟酌后支付下载 声明：如果标题没有注明"已测试"或者"测试可用"等字样的资源源码均未经过站长测试.特别注意没有标注的源码不保证任何可用性