什么是函数函数防抖？
函数执行过一次后，在等待某时间段内不能再次执行。在等待时间内触发此函数，则重新计算等待时间
函数防抖使用场景
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> |
