防抖和节流

目的：为了节约计算机资源，提升用户体验。

节流：规定时间内，只触发一次。比如我们设定1000ms，在这个时间内，无论点击按钮多少次，只会触发一次。

具体场景：一般是用在必须执行这个动作，但是不能够执行太频繁的情况下。比如抢购时候，由于有无数人快速点击按钮，如果每次点击都发送请求，就会给服务器造成巨大压 力，进行节流后，就会大大减少请求次数。例如滚动条滚动时函数的处理，可以通过节流适当减少响应次数。

防抖：频繁触发的情况下，无论进行了多长时间，只有某一次的操作后在指定时间内没有再操作，这一次才判定有效。

具体场景：一般是用来，用户输入有操作时，暂时不执行动作，等待没有新操作时，进行相应响应，例如用户名输入校验的情况，可以等待用户输入完成后再发送请求去校验。 例如搜索框输入关键字过程中实时请求服务器匹配搜索结果，如果不进行处理，那么就是输入框内容一直变化，导致一直发送请求，如果进行防抖处理，结果就是当我们输入内容完成后，一定时间（比如1000ms）没有再输入内容，这时再触发请求。

比如防止表单提交按钮被多次触发，我们应该选择使用节流而不是防抖。

原理：函数节流与函数防抖的原理非常简单，巧妙地使用 setTimeout 来存放待执行的函数，这样可以很方便的利用 clearTimeout 在合适的时机来清除待执行的函数。

防抖debounceTail

只执行首次
// 防抖 且首次执行
// 采用原理：第一操作触发，连续操作时，最后一次操作打开任务开关（并非执行任务），任务将在下一次操作时触发）
function debounceStart(fn, delay, ctx) {
    let immediate = true 
    let movement = null
    return function() {
        let args = arguments
        
        // 开关打开时，执行任务
        if (immediate) {
            fn.apply(ctx, args)
            immediate = false
        }
        // 清空上一次操作
        clearTimeout(movement)
        
        // 任务开关打开
        movement = setTimeout(function() {
            immediate = true
        }, delay)
    }
}

只执行最后一次
// 防抖 尾部执行
// 采用原理：连续操作时，上次设置的setTimeout被clear掉
function debounceTail(fn, delay, ctx) {
    let movement = null
    return function() {
        let args = arguments
        
        // 清空上一次操作
        clearTimeout(movement)
        
        // delay时间之后，任务执行
        movement = setTimeout(function() {
            fn.apply(ctx, args)
        }, delay)
    }
}

节流函数throttle

// 节流方案1，每delay的时间执行一次，通过开关控制
function throttle(fn, delay, ctx) {
    let isAvail = true
    return function () {
        let args = arguments // 开关打开时，执行任务 
        if (isAvail) {
            fn.apply(ctx, args)
            isAvail = false // delay时间之后，任务开关打开 
            setTimeout(function () { isAvail = true }, delay)
        }
    }
}
// 节流方案2，通过计算开始和结束时间
function throttle(fn,delay){
    // 记录上一次函数出发的时间
    var lastTime = 0
    return function(){
    // 记录当前函数触发的时间
    var nowTime = new Date().getTime()
    // 当当前时间减去上一次执行时间大于这个指定间隔时间才让他触发这个函数
    if(nowTime - lastTime > delay){
        // 绑定this指向
        fn.call(this)
        //同步时间
        lastTime = nowTime
    }
    }
}