防抖和节流实现

为什么会出现防抖和节流呢？
就是为了性能优化。如果一个事件被频繁触发，当处理不当时很容易造成浏览器卡死。

节流

节流是指在n秒内只会执行一次，会稀释函数的执行频率。

<button type="button" id="throttle">节流</button>

<script>
	function throttle(fn) {
        let canRun = true;
        return function () {
            if (!canRun) return;
            canRun = false;
            setTimeout(()=> {
                fn.apply(this, arguments);
                canRun = true;
            }, 500);
        }
    }

    function sayHello() {
        console.log('节流成功');
    }

    let btn = document.getElementById('throttle');
    btn.addEventListener('click', throttle(sayHello));
</script>

防抖

防抖，触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间。（常用于搜索框等等）

<input type="text" id="debounce" placeholder="防抖"/>

<script>
	function debounce(fn) {
        let timer = null;
        return function () {
            clearTimeout(timer);
            timer = setTimeout(() => {
                fn.apply(this, arguments);
            }, 500);
        }
    }

    function sayHi() {
        console.log('防抖成功');
    }

    let input = document.getElementById('debounce');
    input.addEventListener('input', debounce(sayHi));
</script>