本文共 1357 字，大约阅读时间需要 4 分钟。

防抖节流

一、防抖

1. 防抖说明

概念：在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。。

2. 应用场景

1. 给按钮加函数防抖组织表单多次提交
2. 对于输入框连续输入进行验证请求时，用函数防抖能有效减少请求次数
3. 判断scroll是否滑倒底部，滚动事件+函数防抖

3. 防抖原理

1. 为什么会引起抖动？

用户在input框输入，监听的input事件输入框内容发生改变就触发绑定的回调函数，回调函数加入异步请求，在用户未完全输入完成，执行多次回调请求。既耗时又影响性能。

2. 如何防抖？

input抖动太灵敏，执行回调次数过于频繁，思路就是降低请求频率。原理：在输入内容时不立即执行，而是延时触发回调函数的执行。如果继续输入，则上次的不再执行。

4.实现代码

代码实现

      
       
       
                   
   
      
    
防抖Demo
      
    
        
               设置延时时间秒:                    设置              
    
      
    
        
               输入请求的数据:	                        
    
      
    
        
     
数据显示列表
        
     
      
    
    
   
    

一、节流

1. 节流说明

概念：规定一个单位时间，在单位时间内，只能触发一次事件的回调函数，如果在同一个单位时间内某事件被触发多次，只有一次能生效。

2. 应用场景

1. 重新调整浏览器窗口大小（resize）
2. 浏览器页面滚动（scroll）
3. 鼠标移动（mousemove）

3. 实现代码

// 第一种var text = document.getElementById('write');function trol(fn,delay){       var pre = new Date();    return function () {           var now = new Date();        if(now-pre >= delay){               fn();            pre = new Date();        }    }}function write(){       console.log(text.value);}text.addEventListener('input',trol(write,5000))

第二种