防抖与节流(含demo)

防抖

短时间内多次触发同一事件，只执行最后一次，或者只执行最开始的一次，中间的不执行。

Demo:

<script>
    let num = 1;
    let content = document.getElementById('content');
 
    function count() {
        content.innerHTML = num++;
    };
    content.onmousemove = debounce(count,1000);
    function debounce(func,wait)
    {
        let timer=null;
        return function()
        {
            let arg=arguments;
            let context=this;
            if(timer)
            {
                clearTimeout(timer)
            }
            timer=setTimeout(()=>{
                func.apply(arg,context)
            },wait)
        }
    }
</script>
</body>

节流

指连续触发事件但是在 n 秒中只执行一次函数。即 2n 秒内执行 2 次… 。节流如字面意思，会稀释函数的执行频率。

Demo:

    <script>
        let num = 1;
        let content = document.getElementById('content');

        function count() {
            content.innerHTML = num++;
        };
        content.onmousemove = throttle(count, 1000);
        function throttle(func, wait) {
            let timeout = null;
            return function () {
                let arg = arguments;
                let context = this;
                if (!timeout) {
                    timeout = setTimeout(() => {
                        timeout=null;
                        func.apply(arg, context);
                    }, wait)
                }
            }
        }
    </script>