防抖和节流

防抖和节流是面试经常会被问到的问题，但是看的时候经常会搞混，对两种现象不明确，今天在实现的时候，觉得自己理解得更加清晰了。

防抖顾名思义是防止抖动，如果操作过于频繁，会出现抖动，防抖要等动作结束之后再执行，比如搜索框keyup事件触发查询，就是要等连续输入后触发，不是每一次输入都触发。

function debounce(fn, timeout) {
        let timer;
        return function() {
            let context = this
            if (timer) {
                clearTimeout(timer)
            }
            timer = setTimeout(function(){
                fn.call(context)
            }, timeout);
        }
    }
window.onmousemove = debounce(function(){
        console.log(888)
    }, 2000)

如果是动作执行过程中固定时间间隔执行那就是节流，对每一次事件进行控制，将频繁发生的事件处理成定时间隔发生，只有在上一次定时执行完之后再开始下一次，比如滑动滚动条，需要随着滚动条滑动内容，不能等滚动条滑动结束之后再更新内容。

    function throttle(fn, timeout) {
        let timer = null;
        valid = true
        return function() {
            if (!valid) {
                return
            }
            valid = false
            timer = setTimeout(() => {
                fn()
                valid = true
            }, timeout);
        }
    }
    window.onmousemove = throttle(function(){
        console.log(888)
    }, timeout)