JS学习笔记-节流和防抖

节流函数

节流就是保证一段时间内只执行一次
实现函数节流throttle的方法一般有两种，

• 定时器 setTimeOut

function throttle(func, wait) {
    let timer;    
    return function() {
        let that = this;
        let args = arguments;  //函数的参数
        if (!timer) {
            timer = setTimeout(() => {  //wait时间以后运行函数并清除函数
                timer = null;  //清除定时器
                func.apply(that , args)
            }, wait)
        }

    }
}

• 时间戳 new Date（）

function throttle(func, wait) {
    let startTime = 0;  //初始时间0
    return function() {
        let now = Date.now();  //现在的时间
        let that = this;
        let args = arguments;
        if (now - previous > wait) {    //如果时间减去初始时间大于要间隔的时间运行函数
            func.apply(that , args);
            previous = now;
        }
    }
}

或者两者组合起来使用，更加精确

// 简单的节流函数 wait的延时保证程序的健壮性
function throttle (func, mustRun, wait) {
    let timer,
        startTime = new Date();
    return function () {
        let that = this,  
            args = arguments,
            curTime = new Date();
        clearTimeout(timeout);
        // 如果达到了时间间隔，触发 handler
        // 如果没有，设置一个延时，假设为最后一次
        if (curTime - startTime >= mustRun) {
            func.apply(that, args);
            startTime = curTime;
        } else {
            // 没达到触发间隔，重新设定定时器 ，
            // 保证不丢失最后一次触发，如果中间再触发，会在之前被clear掉
            timeout = setTimeout(func, wait);
        }
    };
}

防抖函数

触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。

function debounce(fn, wait) {
  var timer = null;
  return function () {
    var context = this
    var args = arguments
    if (timer) {
        clearTimeout(timer);
        timer = null;
    }
    timer = setTimeout(function () {
        fn.apply(context, args)
    }, wait)
  }
}

立即执行版

function debounce(func,wait) {
    let timeout;
    return function () {
        let context = this;
        let args = arguments;

        if (timeout){ clearTimeout(timeout);}

        let callNow = !timeout;
        timeout = setTimeout(() => {
            timeout = null;
        }, wait)

        if (callNow) func.apply(context, args)
    }
}

参考其他网友的