js的防抖和节流

js的 防抖（debounce）和 节流（throttle ）

防抖和节流一般用于高频触发事件，属于浏览器性能优化，解决高频发时间导致的浏览器卡顿，或者是不断的发起数据请求，使服务器端返回数据过慢或卡死~

防抖

一个简单的例子，监听一个input框的数据请求：

  function search10(){
      ...ajax查询请求
  }
  document.getElementById('aaa').onkeydown = search10

在 中文输入法 下，无论我是否输入完成，反正我只有输入了东西就会 一直发起请求 ，所以就…很慢…
我想让我这一个或一段中文输入完成后在发起请求，所以优化成了这样：

function debounce(func,wait){
    let timer;
    return function() {  //闭包
        if(timer) clearTimeout(timer) 
        timer = setTimeout(func,wait) 
    }
}

 function search10(){
     ...ajax查询请求
 }
 document.getElementById('aaa').onkeydown = debounce(search10,1000)

好了，如此便解决了我的需求，我的请求在触发的每1秒内会触发一次，时间可控，完美！

节流

这个不好沿用上面的例子，因为1秒（时间可控）内我输入完成了，可是上一次settimeout还没执行结束~
所以想到了一个新场景，在监听滚动条，或者是鼠标移入移出等事件的时候，可以很好的用到这个：

function throttle = function(func, wait) {            
　　let timer = null;            
    return function() {                
        let context = this;               
        let args = arguments; // arguments中存着e            
        if (!timer) {
            timer = setTimeout(function() {                        
                func.apply(context, args);                        
                timer = null;                    
            }, wait);          
        }            
    }      
}
 function myEvent(){
     ...myEvent
 }
 document.getElementById('aaa').onmousemove= debounce(myEvent,1000)

这里节流保证了1秒内只会执行一次我的方法
好了 完事儿
=========

收藏一个input各种事件
https://blog.csdn.net/weixin_41655541/article/details/89850349