One Hundred Years of Solitude

扬帆,启航!

JS-函数防抖

什么是函数函数防抖?

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

函数防抖使用场景

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

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

场景之一:用户输入

点赞

发表评论

电子邮件地址不会被公开。