JavaScript之防抖节流函数

JavaScript之防抖节流函数

所谓防抖，就是指触发事件后在 n 秒内函数只能执行一次（最后一次），如果又重新触发了事件，则会重新计算函数执行时间。
防抖函数：

    var num = 0;
    //防抖函数 debound
    function debound(callback, wait) {
        let timer = null
        return function() {
            clearTimeout(timer)
            timer = setTimeout(callback, wait)
        }
    }
    document.getElementsByClassName("content")[0].onclick = debound(() => {
        console.log(num++);
    }, 1000);

如上例：连续点击，就会重新计算函数执行时间，停止点击就会执行最后一次的函数。

所谓节流，就是指连续触发事件，但是只在规定的时间内执行函数。节流会稀释函数的执行频率。
节流函数：

  var num = 0;

    function throttle(callback, wait) {
        let lastTime = null;
        return function() {
            var nowTime = new Date()
            if (nowTime - lastTime > wait) {
                callback()
                lastTime = nowTime
            }
        }
    }
    document.getElementsByClassName("content")[0].onclick = throttle(() => {
        console.log(num++);
    }, 2000);

如上例：连续点击，每过2秒执行一次函数。