什么是函数函数防抖?
函数执行过一次后,在等待某时间段内不能再次执行。在等待时间内触发此函数,则重新计算等待时间
函数防抖使用场景
1.每次 resize/scroll 触发统计事件
2.文本输入验证(连续输入文字后发生AJAX请求进行验证,验证一次就好)
3.mousemove,mousedown
4.加载更多(这个与前2个还是有点区别)
实现思路如下:
将目标方法(动作)包装在setTimeout里面,然后这个方法是一个事件的回调函数,如果这个回调一直执行,那么这些动作就一直不执行。为什么不执行呢,我们搞了一个clearTimeout,这样setTimeout里的方法就不会执行! 为什么要clearTimeout呢,我们就需要将事件内的连续动作删掉!待到用户不触发这事件了。那么setTimeout就自然会执行这个方法,那么这个方法用在什么地方呢,就是用于input输入框架的格式验证,假如只是验证都是字母也罢了,太简单了,不怎么耗性能,如果是验证是否身份证,这性能消耗大,你可以隔170ms才验证一次。这时就需要这个东西。或者你这个是自动完全,需要将已有的输入数据往后端拉一个列表,频繁的交互,后端肯定耗不起,这时也需要这个,如隔350ms。这个保证了正常的用户每输入1,2个字符就能触发一次。如果用户是输入法狂魔,也可以狠制他每输入3~6个字符触发一次。
这个方法的重点是,它在用户不触发事件的时,才触发动作,并且抑制了本来在事件中要执行的动作。其他应用场合:提交按钮的点击事件。
场景之一:用户输入
<!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
>
「三年博客,如果觉得我的文章对您有用,请帮助本站成长」
共有 0 条评论 - JS-函数防抖