lodash的防抖debounce和节流throttle

lodash的防抖debounce和节流throttle

目录  隐藏 

1 防抖debounce

2 节流throttle

文章目录 收缩

• 防抖debounce
• 节流throttle

防抖debounce

用户在输入框内频繁输入时，默认会被触发多次。如果希望在用户输入后，延迟一定时间的再触发，则可以使用防抖debounce。

DEMO：在输入框内输入时，在规定时间（0.5秒）内只触发一次

• 开启防抖前
  每次输入都会触发
  

• 开启防抖后
  输入间隔一段时间后才触发
  

代码：

1. <script src="https://cdn.jsdelivr.net/npm/lodash@4.17.19/lodash.min.js"></script>
2. <input type="text" id="username3" value="" placeholder="请输入用户名">
3. <script>
4. var debounce = _.debounce(test, 500);
5. document.getElementById("username3").onkeyup = debounce
6. function test() {
7. console.log(document.getElementById("username3").value);
8. }
9. </script>

节流throttle

防抖适合于输入事件, 等到最后一次输入才执行需要进行的操作。
节流适合于点击事件, 第一下点击就能生效, 之后指定时间段内的点击不生效。

DEMO：多次点击按钮，在规定时间（2秒）内只触发一次

• 开启节流前
  每点击一次按钮，就会触发一次。
  

• 开启节流后
  在规定时间内，多次点击，只触发一次。
  

代码：

1. <script src="https://cdn.jsdelivr.net/npm/lodash@4.17.19/lodash.min.js"></script>
2. <input type="button" id="button" value="测试">
3. <script>
4. var throttled = _.throttle(test, 2000, {'trailing': false});
5. document.getElementById("button").onclick = throttled
6. function test() {
7. console.log(1);
8. }
9. </script>

详细文档：https://www.lodashjs.com/docs/lodash.throttle