最简单的防抖和节流；这都不会?

防抖:
在一定时间内执行最后一次操作;
节流:
在一定时间内执行一次操作;

如果不理解的可以去看看其他的文字解释;

先来防抖代码再做解释 :

    function fn(foo) {
        let timer = null
        return () => {
            if(timer !== null) clearTimeout(timer)
            timer = setTimeout(() => {
                foo()
            }, 1000)
        }
    }
    function foo() {
        console.log('防抖');
    }

从以上代码中可以看出来: 重点就是fn函数中return这一部分 ; if判定这儿 可以这样理解: 如果 timer 不等于null 那么就表示已经有一个事件在执行了 ; 而我们要做的是让其只执行最后一次操作 ; 那么我们就需要把以前的给清除掉 , 然后再执行 ; 就这么简单;完成啦!

以上代码用的是ES6的箭头函数; 如果是用普通函数的话 就需要改变this的指向问题了;上代码

 function fn(foo) {
        // 声明一个时间变量
        let timer = null 
        // 返回一个函数值
        return function(){
            // 将this指向赋值   此时的 this 指向的是 实例 button
            let context = this 
            // 获取传过来的值
            let ages = arguments 
            // 清除定时器
            clearTimeout(timer)
            // 声明一个定时器
            timer = setTimeout(()=>{
                // 在定时器里面调用需要 防抖的函数
                foo.call(context,ages)
            },1000)
        }
    }
    // 需要防抖的函数
    function foo (){
        console.log(4156);
    }

再给上节流代码

 function fn(foo) {
        let timer = null
        return ()=>{
            if(!timer){
                timer = setTimeout(() => {
                    foo()
                    timer = null
                }, 2000);
            }
        }
    }
    function foo(){
        console.log('节流');
    }

从以上代码中可以看出来: 重点呢还有fn函数中return这一部分 ; if判定这儿 可以这样理解: 如果 timer 等于null 的时候才执行函数里面的代码 ; 并且把定时器恢复为 null 一遍下一次的执行 ; 就这么简单;完成啦!

以上代码用的是ES6的箭头函数; 如果是用普通函数的话 就需要改变this的指向问题了;上代码

 function fn(foo) {
        // 声明一个时间变量
        let timer = null 
        // 返回一个函数值
        return function(){
            // 将this指向赋值   此时的 this 指向的是 实例 button
            let context = this 
            // 获取传过来的值
            let ages = arguments 
            // 清除定时器
            // clearTimeout(timer)
            if(!timer) {  // 判定timer没有数值
                // 声明一个定时器
                timer = setTimeout(()=>{
                    // 在定时器里面调用需要 节流的函数
                    foo.call(context,ages)
                    // 如果执行到这儿的是否需要把 timer 初始化 为null  ;便于下次判断
                    timer = null
                },3000)
            }
        }
    }
    // 需要节流的函数
    function foo (){
        console.log(4156);
    }