防抖动函数和节流函数

防抖动函数是为了在类似连续点击事件中只在最后一次触发具体逻辑；

节流函数是为了间隔一段时间执行具体逻辑

let btn = document.getElementById("btn");

    //防抖，执行性一次，每次调用间隔小于定时间隔
    function debounce(fn,wait){
        var timer = null;
        return function () {
            var args = arguments;
            if(timer){
                clearTimeout(timer);
            }
            timer = setTimeout(function(){
                fn.apply(this,Array.prototype.slice.call(args,0));
            },wait);
        }
    }


    //节流函数，每隔一段时间执行一次
    function throttle(fn,wait) {

        var timer = null;
         return function(){

          /*   if(!timer){
                 timer = setTimeout(()=>{

                     fn.apply(this,Array.prototype.slice.call(arguments,0));
                     timer = null;
                 },wait)
             }*/

             var args = arguments;
             var current = this;
             if(!timer){
                 timer = setTimeout(function(){

                    /*
                     console.log(this == current);  // true
                     console.log(arguments == args);  // false
                     */

                     fn.apply(current,Array.prototype.slice.call(args,0));
                     timer = null;
                 },wait);
             }
         }
    }

    function action(a){
        console.log((new Date()).getSeconds());
    }

    //连续点击按钮测试
    //btn.onclick = throttle(action,1000);
    btn.onclick = debounce(action,1000);

 

       // 防抖
          window.onload = function () {
            //模拟ajax请求
            function ajax(content) {
                console.log('ajax request ' + content)
            }
            function debounce(fun, delay) {
                return function (args) {
                    //获取函数的作用域和变量
                    let that = this
                    let _args = args
                    //每次事件被触发，都会清除当前的timeer，然后重写设置超时调用
                    clearTimeout(fun.id)
                    fun.id = setTimeout(function () {
                        fun.call(that, _args)
                    }, delay)
                }
            }
            let inputDebounce = document.getElementById('debounce')
            let debounceAjax = debounce(ajax, 500)
            inputDebounce.addEventListener('keyup', function (e) {
                debounceAjax(e.target.value)
            })
        }


// 
         // 节流
        window.onload = function () {
            //模拟ajax请求
            function ajax(content) {
                console.log('ajax request ' + content)
            }

            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 inputThrottle = document.getElementById('throttle')
            inputThrottle.addEventListener('keyup', function (e) {
                throttleAjax(e.target.value)
            })
        }