loadash-debounce(防抖动)

抖动现象常见的场景有页面滚动事件,输入框input事件,页面resize事件等等

maxWait 保证在 所书写的时间内会执行1次
leading 指定在延迟开始前调用
trailing 指定在延迟结束后调用

下面代码,在10s内连续点击会打印四次

1.第一个三秒 打印一次
2.第二个三秒 打印一次
3.第三个三秒 打印一次
4.最后一秒 打印一次

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <button id='btn'>按钮</button>
    <script src="./jquery.min.js" type='text/javascript'></script>
    <script src="./loadash.min.js" type='text/javascript'></script>
    <script>
        $('#btn').on('click',_.debounce(function(){
            console.log('我被点击了。。。')
        },1000,{
            'leading': true, // 指定在延迟开始前调用
            'trailing': false, // 指定在延迟结束后调用
            'maxWait': 3000, // 保证在此时间内会触发1次
        }));
    </script>
</body>

参考于:
实例解析防抖动(Debouncing)和节流阀(Throttling)
loadash官方参考文档

你可能感兴趣的:(js)