[函数]函数的防抖和节流

函数防抖

• debounce 防抖 每次触发事件时都取消之前的延时调用方法
• @param fn 延时调用函数
• @param wait 等待时间
• @return Function 延时执行的方法
• 应用 节约请求资源

• - 频繁操作点赞和取消点赞，因此需要获取最后一次操作结果并发送给服务器
  

• - search搜索联想，用户在不断输入值时，用防抖来节约请求资源。
  

function debounce(fn,wait){
    let timeout  = null ;
    return function(){
        // 保留调用时的this上下文
        let context = this;
        // 保留调用时传入的参数
        let args = arguments;
        if(timeout){
            clearTimeout(timeout);
        }
        timeout = setTimeout(() => {
            fn.apply( context,arguments )
        },wait)
    }
}
//例：
var btn = document.getElementById('aa');
btn.onclick = debounce(function(){
  sayHi()
},5000)

函数节流

• - 鼠标不断点击触发，mousedown(单位时间内只触发一次)
  

• - window触发resize的时候，不断的调整浏览器窗口大小会不断的触发
  

/**
 * 闭包节流函数方法（可传参数）
 * @param Function fn 调用函数
 * @param Number delay 延迟多长时间
 * @return Function 延迟执行的方法
 * 应用 - 鼠标不断点击触发，mousedown(单位时间内只触发一次)
 *      - window触发resize的时候，不断的调整浏览器窗口大小会不断的触发这个事件
 */
//节流 -> 在n秒钟只执行一次
var throttle = function (fn, delay) {
    let canRUn = true ;
    return function () {
        if(!canRUn){
            return ;
        }
        var args = arguments;
        canRUn = false ;
        setTimeout(function () {
            fn.apply(this, args);
            canRUn = true ;
        }, delay);
    }
}
function postFn(name){
   console.log('开始执行'+name)
}
var a = throttle(postFn,3000)('judy');