防抖与节流

原创已于 2022-03-23 15:43:54 修改 · 341 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js

于 2022-03-23 15:42:47 首次发布

本文分享了JavaScript中防抖(_debounce)和节流(_throttle)函数的实现代码，这两个函数常用于优化性能，例如在长列表滚动、事件监听等场景下。防抖函数避免频繁调用，而节流函数则限制执行频率。通过引入并使用这些函数，可以有效地提升用户体验，减少不必要的计算或操作。

防抖与节流

我和其他人不一样，我直接上代码并且教你如何使用

// 防抖函数
export function _debounce(fn, delay, immediate) {
    var delay = delay || 200;
    var timer;
    return function () {
        var th = this;
        var args = arguments;
        if (timer) {
            clearTimeout(timer);
        }
        if (immediate) {
            var callNow = !timer
            timer = setTimeout(() => {
                timer = null;
            }, delay)
            if (callNow) fn.apply(th, args)
        } else {
            timer = setTimeout(function () {
                timer = null;
                fn.apply(th, args);
            }, delay)
        }
    }
}

//节流函数
export function _throttle(fn, interval, type) {
    if (type === 1) {
        let previous = 0;
    } else if (type === 2) {
        let timeout;
    }
    var interval = interval || 200;
    return function () {
        var th = this;
        var args = arguments;
        if (type === 1) {
            let now = Date.now();
            if (now - previous > interval) {
                fn.apply(th, args);
                previous = now;
            }
        } else if (type === 2) {
            if (!timeout) {
                timeout = setTimeout(() => {
                    timeout = null;
                    fn.apply(th, args)
                }, interval);
            }
        }
    }
}

以上放在util文件里面
在你要用的页面引入之后，用法：

//你定义的方法
<p @click="delateData" :plain="true">删除</p>

// 你的使用
    delateData: _debounce(function () {
      this.$message({
        message: "下载成功",
        type: "success"
      })
    }, 1000),