[JavaScript知识库]js函数防抖和节流

函数防抖：当持续触发事件时，一定时间段内没有再次触发事件，事件处理函数才会执行一次，如果设定的时间到来之前，又触发了一次事件，就重新开始延时；

代码：

// 防抖
function debounce(func, wait=0) { ? ?
　if (typeof func !== 'function') {
　　throw new TypeError('need a function arguments')
　}
　let timeid = null;
? let result;
　return function() {
　  let context = this;
　　let args = arguments; 
    if (timeid) {
       clearTimeout(timeid);
    }
    timeid = setTimeout(function() {
      result = func.apply(context, args);
    }, wait);
     return result;
  }
}
// 处理函数
function handle() { ? ?
    console.log(Math.random()); 
}
// 滚动事件
window.addEventListener('scroll', debounce(handle, 1000));

函数节流：当持续触发事件时，保证一定时间内只调用一次事件处理函数，

代码：

// 节流throttle代码（时间戳+定时器）：
var throttle = function(func, delay) {     
    var timer = null;     
    var startTime = Date.now();     
    return function() {             
        var curTime = Date.now();             
        var remaining = delay - (curTime - startTime);             
        var context = this;             
        var args = arguments;             
        clearTimeout(timer);              
        if (remaining <= 0) {                    
            func.apply(context, args);                    
            startTime = Date.now();              
        } else {                    
            timer = setTimeout(func, remaining);              
        }      
    }
}
function handle() {      
    console.log(Math.random());
} 
window.addEventListener('scroll', throttle(handle, 1000));