防抖和节流

一、防抖（debounce）

• 当持续触发某一事件，停止触发后，在规定的时间到达时调用一次函数；比如：你在持续点击某一元素，只有当你点击停止后，在规定的时间到达后，才会调用一次回调函数，以减少浏览器的负担；

//防抖处理
function debounce(fn,wait){
  var timeout = null
  return function(){
    if(timeout !== null)  clearTimeout(timeout)
    timeout = setTimeout(fn,wait)  // 关键句
  }
}
//你要执行的操作
function handle(){
  console.log('你执行了')
}
//绑定到需要防抖处理的元素上
window.addEventListener('click', debounce(handle, 3000))

点击停止后，会打印出一次“你执行了”~~（每次都会触发事件，但只有在规定时间后才会调用事件）

二、节流（throttle）

• 持续触发某一事件时，不会每次都去调用函数去执行，而是我们规定在一个时间段内只调用一次函数；比如，你在持续滚动页面的时候，不让它每次都会调用函数，而是规定它每隔多少秒去调用一下函数；

//利用时间戳
var throttle = function(func, delay) {            
　　var prev = Date.now();
　　return function() {  
　　　　var that = this;                
　　　　var args = arguments;                
　　　　var now = Date.now();  
　　　　if (now - prev >= delay) {
　　　　　　func.call(that, args);                    
　　　　　　prev = Date.now();                
　　　　}            
　　}        
}        
function handle() {            
　　console.log(Math.random());        
}        
window.addEventListener('click', throttle(handle, 1000));

区别：函数防抖只会在事件最后一次触发后去调用一次函数；函数节流是，不管事件触发多么频繁，都会保证在规定时间内执行一次回调函数；