JS-函数防抖

2018-07-10 分类：JavaScript 作者：管理员阅读（276）

什么是函数函数防抖？

函数执行过一次后，在等待某时间段内不能再次执行。在等待时间内触发此函数，则重新计算等待时间

函数防抖使用场景

1.每次 resize/scroll 触发统计事件
2.文本输入验证（连续输入文字后发生AJAX请求进行验证，验证一次就好）
3.mousemove，mousedown
4.加载更多(这个与前2个还是有点区别)

实现思路如下：

将目标方法（动作）包装在setTimeout里面，然后这个方法是一个事件的回调函数，如果这个回调一直执行，那么这些动作就一直不执行。为什么不执行呢，我们搞了一个clearTimeout，这样setTimeout里的方法就不会执行！为什么要clearTimeout呢，我们就需要将事件内的连续动作删掉！待到用户不触发这事件了。那么setTimeout就自然会执行这个方法，那么这个方法用在什么地方呢，就是用于input输入框架的格式验证，假如只是验证都是字母也罢了，太简单了，不怎么耗性能，如果是验证是否身份证，这性能消耗大，你可以隔170ms才验证一次。这时就需要这个东西。或者你这个是自动完全，需要将已有的输入数据往后端拉一个列表，频繁的交互，后端肯定耗不起，这时也需要这个，如隔350ms。这个保证了正常的用户每输入1，2个字符就能触发一次。如果用户是输入法狂魔，也可以狠制他每输入3～6个字符触发一次。
这个方法的重点是，它在用户不触发事件的时，才触发动作，并且抑制了本来在事件中要执行的动作。其他应用场合：提交按钮的点击事件。

场景之一：用户输入

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>函数防抖节流-用户输入</title>
</head>
<body>
<input type="text">;
</body>
<script>
//函数防抖
function debounce(func, delay) {
var timeout;
return function(e) {
//console.log("清除",timeout,e.target.value)
clearTimeout(timeout);
var context = this, args = arguments
//console.log("新的",timeout, e.target.value)
timeout = setTimeout(function(){
// console.log("----")
func.apply(context, args);
},delay)
};
};
// 绑定监听
document.querySelector("input").addEventListener('input', debounce(function(e) {
console.log("change", e.target.value, new Date-0)
}, 380),false);
</script>
</html>

「两年博客，如果觉得我的文章对您有用，请帮助本站成长」

赞(1) 打赏