节流，防抖

1.防抖

为了防止用户在一段时间内多次触发事件，消耗性能，提出了防抖。
防抖是指在一定时间内多次触发时间，只处理最后一次触发的事件。

<input></input>

<script>
    //防抖的作用：用户多次触发时间，在一定的时间内只处理最后一次事件
    var btn = document.querySelector("input")  
    var t = null;//用t来控制是否触发
    btn.oninput = function() {     
        if (t !== null) {
            clearTimeout(t)
        }
        t = setTimeout(() => {
            console.log(this.value)
        }, 500)
        /* t的初始值为null,那么第一次触发事件的时候会直接跳过if,执行到t=setTimeout,这时t就有值了,但是当500ms还没到时再触发事件
        那么就会执行if语句,此时的t等于上一次未执行完的setTimeout,此时用cleartimeout去清除掉它,循环下去就可以实现在完整的等过500ms
        以后再触发console */
    }
</script>

上面的代码有两个问题：
1.有一个与业务逻辑无关的变量t
2.防抖函数和要执行的事件函数混到一起，可以利用闭包来封装

btn.oninput = debounce(fn, delay);
    debounce(fn, delay) 
    {
        var t = null;
        return function() {
            if (t !== null) {
                clearTimeout(t)
            }
            setTimeout(() => {
                fn.call(this)//当在外部使用this的时候，由于this箭头函数的this指向外部环境，会指向window，所以需要用call来将fn函数的this来指向debounce中的this
            }, delay)
        }
    }

2.节流