JavaScript — 防抖节流

wangyang

函数防抖：

• 说明：函数防抖(debounce) ，就是指触发事件后，在n秒内函数只能执行一次，如果触发事件后在n秒内又触发了事件， 则会重新计算函数延迟执行时间
  
  
• 原因：开发过程中，有一些事件，常见的例如，onresize, scroll,mousemove ,mousehover等，会被频繁触发(短时间内 多次触发)，不做限制的话，有可能秒之内执行几十次、几百次，如果在这些函数内部执行了其他函数，尤其是执行了 操作DOM的函数(浏览器操作DOM是很耗费性能的)，那不仅会浪费计算机资源，还会降低程序运行速度，甚至造成浏览器 卡死崩溃。这种问题显然是致命的。
  
  
• 使用场景：搜索框搜索输入。只需用户最后一次输入完， 再发送请求; 用户名、 手机号、邮箱输入验证; 浏览器窗口大小改变后， 只需窗口调整完后，再执行resize事件中的代码，防止重复渲染
  
  

1. //防抖函数
   
2. function debounce(fn, delay) {
   
3.   // 记录上一次的延时器
   
4.   var timer = null;
   
5.   return function() {
   
6.     // 清除上一次延时器
   
7.     clearTimeout(timer)
   
8.     timer = setTimeout(function() {
   
9.       fn.apply(this)
   
10.     }, delay)
    
11.   }
    
12. }

复制代码

函数节流：

• 说明：所谓节流，就是指连续触发事件但是在n秒中只执行一次函数 节流会稀释函数的执行频率。
  
  对于节流，一般有两种方式可以实现，分别是时间戳版和定时器版。
  
  
  

1. /* 节流
   
2. 
   
3. \* func <Function> 触发回调执行的函数
   
4. 
   
5. \* wait <Number> 时间间隔，单位ms
   
6.         immediate  true  第一次执行  false  最后一次执行
   
7. */
   
8. 
   
9. export function throttle(func, wait = 500, immediate = true) {
   
10. 
    
11.     let context, args, timeout;
    
12. 
    
13.     let old = 0; // 时间戳
    
14. 
    
15.     return function () {
    
16. 
    
17.         context = this;
    
18. 
    
19.         args = arguments;
    
20. 
    
21.        let now = new Date().valueOf();
    
22. 
    
23.        if (immediate === false && old == 0) old = now; // 不要立即执行，则第一次不会进入if(now-old>wait)
    
24.   
    
25.        if (now - old > wait) {
    
26. 
    
27.           // 当时间间隔达到一个周期则执行此代码块
    
28. 
    
29.           // 第一次会直接执行
    
30. 
    
31.           if (timeout) {
    
32. 
    
33.             // 将计时器清除，防止执行两次响应函数
    
34. 
    
35.             clearTimeout(timeout);
    
36. 
    
37.             timeout = null;
    
38. 
    
39.           }
    
40. 
    
41.           func.apply(context, args);
    
42. 
    
43.           old = now;
    
44. 
    
45.         } else if (!timeout && immediate === true) {
    
46. 
    
47.           // 当时间间隔未达到一个周期时则执行此代码块
    
48. 
    
49.           // 最后一次被执行
    
50. 
    
51.           timeout = setTimeout(function () {
    
52. 
    
53.           // 在一般情况下是不会执行这个延迟函数的，只有在最后一次执行此延迟函数
    
54. 
    
55.             old = new Date().valueOf(); // 在最后一次执行时候将old置为当前时间，防止下一次操作响应的时间间隔不足wait
    
56. 
    
57.             timeout = null;
    
58. 
    
59.             func.apply(context, args);
    
60. 
    
61.         }, wait);
    
62. 
    
63.       }
    
64. 
    
65.    };
    
66. 
    
67. }

复制代码