2019-01-18 js防抖与节流

防抖： 多次触发只执行一次， 并在函数触发结束的时候执行。

1. 防抖第一版，无法复用

    var timeout, c = 0;
    var box = document.querySelector('#box')
    box.onmousemove = function() {
        if (timeout) {
            clearTimeout(timeout)
        }
        timeout = setTimeout(function(){
            console.log(c++)
        }, 200)
    }

2. 第二版

function debounce(func, wait) {
    var timeout
    return function() {
        if(timeout) {
            clearTimeout(timeout)
        }
        timeout = setTimeout(function() {
            func.call(null)
        }, wait)
    }
}
var c = 0;
var box = document.querySelector('#box')
box.onmousemove = debounce(
    function() {
        console.log(c++)
    }, 
200)

3.第三版
修改函数调用时this的指向问题

function debounce(func, wait) {
    var timeout
    return function() {
        let self = this
        if(timeout) {
            clearTimeout(timeout)
        }
        timeout = setTimeout(function() {
            func.call(self)
        }, wait)
    }
}

4.第四版
回掉函数 参数传递

function debounce(func, wait) {
    var timeout
    return function() {
        let self = this;
        // 参数转为数组
        let args = Array.prototype.slice.call(arguments);
        if(timeout) {
            clearTimeout(timeout);
        }
        timeout = setTimeout(function() {
            func.apply(self, args);
        }, wait);
    }
}
var c = 0;
var box = document.querySelector('#box')
box.onmousemove = debounce(
    function(e) {
        console.log(e) // 传入事件对象
        console.log(c++)
    }, 
200)

5.第五版
加入立即触发

function debounce(func, wait, immediate) {
    var timeout
    return function() {
        let self = this;
        // 参数转为数组
        let args = Array.prototype.slice.call(arguments);
        if(timeout) {
            clearTimeout(timeout);
        }

        if(immediate) {
            // 此处timeout必须进行赋值操作，因为闭包的关系，再把此函数作用域内的timeout设置为null， 内存空间的timeout其实还是存在
            let callNow = !timeout
            timeout = setTimeout(function(){
                timeout = null
            }, wait);
            // !timeout 一直是有值得状态，取得闭包的内存空间内的timeout
            if(callNow) {
                func.apply(self, args)
            }
        } else {
            timeout = setTimeout(function() {
                func.apply(self, args);
            }, wait);
        }
    }
}
...

6. 函数返回问题
   js事件模型，settimeout是异步返回，所以此处用回掉函数活着promise来解决

function debounce(func, wait, immediate) {
   var timeout
   return function() {
       let self = this;
       // 参数转为数组
       let args = Array.prototype.slice.call(arguments);
       return new Promise(function(resolve) { // 返回一个promise对象
           if(timeout) {
               clearTimeout(timeout);
           }
           if(immediate) {
               var callNow = !timeout
               timeout = setTimeout(function(){
                   timeout = null
               }, wait);
               if(callNow) {
                   resolve(func.apply(self, args)) //值操作
               }
           } else {
               timeout = setTimeout(function() {
                   resolve(func.apply(self, args));
               }, wait);
           }
       })
   }
}
var c = 0;
var box = document.querySelector('#box')
let moveFunc = debounce(
   function(e) {
       return c++
   }, 
1000, true)
box.onmousemove = function() {
   moveFunc().then(res => { // 因为又返回了一个函数，所以必须调用才会又promise返回值
       console.log(res)
   })
}

underscore throttle

/**
频率控制 返回函数连续调用时，func 执行频率限定为 次 / wait
@param {function} func 传入函数
@param {number} wait 表示时间窗口的间隔
@param {object} options 如果想忽略开始边界上的调用，传入{leading: false}。如果想忽略结尾边界上的调用，传入{trailing: false}
@return {function} 返回客户调用函数
*/