JS系列1---节流，去抖（防抖）应用场景：intput请求优化，页面监听

　　在项目开发过程中经常遇到在input的change事件中发起请求，将用户最新输入的字符作为data传给后台，但是如果用户的输入频率过高，或者用户输入的字符还未拼成一个完整的字词，这时候发起请求会浪费网络资源，使页面卡顿。

　　这时候我们就用到了函数去抖（debounce）和函数节流（throttle），首先来看一下概念:

　　1,函数去抖(又称防抖)

　　在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。

　　未优化前代码demo:

        <input id="debounceTest" />
        <script>
            function ajax(value) {
              console.log(value+'-----------发起ajax请求')
            }
 
            let inputa = document.getElementById('debounceTest')
 
            inputa.addEventListener('keyup', function (e) {
                ajax(e.target.value)
            })
        </script>

　　效果图：

　　

　　从页面中可以看到，只要触发了keyup时间，页面就会发起请求，不管用户是否输入了一个完整的字符，这样对网络资源十分浪费，在移动端甚至可能造成用户体验不流畅，系统卡顿，所以我们来对代码进行优化，如下：

优化后代码demo：

function ajax(content) {
  console.log(content+'---------------ajax请求')
}
 
function debounce(fun, delay) {
    return function (args) {
        let that = this
        let _args = args
        clearTimeout(fun.id)
        fun.id = setTimeout(function () {
            fun.call(that, _args)
        }, delay)
    }
}
 
let inputb = document.getElementById('debounce')
 
let debounceAjax = debounce(ajax, 500)
 
inputb.addEventListener('keyup', function (e) {
        debounceAjax(e.target.value)
    })

　　页面效果：

　　

　　可以看出，当用户一直在输入时，页面不会发起请求，当用户的上次输入与下次输入有一定时间间隔时，页面才会发起请求。

同样的问题还有另一种解决方法：

2，函数节流(throttle)

规定在一个单位时间内，只能触发一次函数。如果这个单位时间内触发多次函数，只有一次生效。

　还是上边的例子，这次用节流的方法实现

节流后的代码demo:

function throttle(fun, delay) {
        let last, deferTimer
        return function (args) {
            let that = this
            let _args = arguments
            let now = +new Date()
            if (last && now < last + delay) {
                clearTimeout(deferTimer)
                deferTimer = setTimeout(function () {
                    last = now
                    fun.apply(that, _args)
                }, delay)
            }else {
                last = now
                fun.apply(that,_args)
            }
        }
    }
 
    let throttleAjax = throttle(ajax, 1000)
 
    let inputc = document.getElementById('throttle')
    inputc.addEventListener('keyup', function(e) {
        throttleAjax(e.target.value)
    })

页面效果：

　　可以看出，不管用户的输入速度是多少，页面总是以恒定的间隔向后台发起请求。

　　函数节流还可以应用于其他事件，比如mouse移动事件，页面滚动事件，resize事件等能高频次触发的事件中。

函数节流和去抖都是为了解决事件触发频率过高的问题，但是使用了不同的原理

节流是总是以固定的间隔发起请求，对高频率事件做做次数限制。去抖是固定时间段内只发送一次请求。对高频率事件做做次数限制

　　以上为节流去抖的全部内部，如有错误还望指正。