js 防抖和节流

  1. js 防抖和节流
    1. 防抖函数
    2. 节流函数

js 防抖和节流

lodash里面有封装好的现成的方法,可以直接拿来用,下面是自己的实现

防抖函数

/**
* @desc   函数防抖      “立即执行版本” 和 “非立即执行版本” 的组合版本
* @param  func         需要执行的函数
* @param  wait         延迟执行时间(毫秒)
* @param  immediate    true表示立即执行 false表示非立即执行 默认false
**/
function debounce(func, wait, immediate = false) {
    let timer;
    // 这里用到了闭包,timer本来在debounde函数执行完毕的时候就会被销毁
    // 但是下面return的代码中使用了timer,因此不会被销毁,被保留了下来
    return function (...args) {
        if (timer) clearTimeout(timer);
        if (immediate) {
            var callNow = !timer;
            timer = setTimeout(() => {
                timer = null;
            }, wait)
            if (callNow) func.apply(this, args)
        } else {
            timer = setTimeout(() => {
                func.apply(this, args)  // 这里要修改this指向,否则this指向的不是时间出发对象,而是window
            }, wait);
        }
    }
}

节流函数

/**
* @desc  函数节流   “立即执行版本” 和 “非立即执行版本” 的组合版本
* @param func      需要执行的函数
* @param wait      延迟执行毫秒数
* @param immediate true表示立即执行 false表示非立即执行 默认false
*/
function throttle(func, wait, immediate = false) {
    if (immediate) {
        var previous = 0;
    } else {
        var timeout;
    }
    return function () {
        let args = arguments;
        if (immediate) {
            let now = Date.now();
            if (now - previous > wait) {
                func.apply(this, args);
                previous = now;
            }
        } else {
            if (!timeout) {
                timeout = setTimeout(() => {
                    timeout = null;
                    func.apply(this, args)
                }, wait)
            }
        }
    }
}

转载请注明来源,欢迎对文章中的引用来源进行考证,欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论,也可以邮件至 289211569@qq.com