细说防抖和节流

防抖和节流在平时工作中遇到很多，但是有些知识点始终没弄清楚，索性写一篇文章来说道说道其中区别

防抖

防抖是在高频事件n秒只会触发一次，并且在n秒内高频事件假如再次被触发则重新开始计时，其触发是最后一次事件导致的

看看代码

    function debounce(fn) {
        let timer = null;
        return function(){
            if (timer) clearTimeOut(timer)
            timer = setTimeOut(fn.apply(this, arguments), 3000)
        }
    
    }
    
    function sayHi() {
        console.log('防抖成功')
    }
    
    let button = document.getElementById('button');
    button.addEventListerer('click', debounce(sayHi))
    
    

节流

节流是在固定的时间间隔中触发，每个时间间隔总会触发一次

看看代码

    let throll = function(fn) {
        let canclick = true
        if (canclick) {
            return function() {
                canclick = false
                setTimeOut(function() {
                    canclick = true;
                    fn.apply(this, arguments)
                }, 3000)

            }
        }
    }
    
    function sayHi() {
        console.log('节流成功')
    }
    
    let button = document.getElementById('button');
    button.addEventListerer('click', debounce(sayHi))

二者的区别

防抖在高频事件过程中只会执行一次，且执行的是最后一次，而节流在高频事件中可能会执行多次，至少执行一次