jsvue节流防抖使用方法（附带vue单页面多页面使用实力）亲测可用

Posted 2020-12-14 问问大将军

/**
 * 这里是模块说明
 * @module 节流防抖公用小插件，js和vue多页面可以使用
 * @author zhangjiwen
 * @date 2020-07-04
 * @requires  无//模块依赖
 */
// 节流
// 思路： 第一次先设定一个变量true，
// 第二次执行这个函数时，会判断变量是否true，
// 是则返回。当第一次的定时器执行完函数最后会设定变量为flase。
// 那么下次判断变量时则为flase，函数会依次运行。
function throttle(fn, delay = 100) {
    //首先设定一个变量，在没有执行我们的定时器时为null
    var timer = null;
    return function () {
        //当我们发现这个定时器存在时，则表示定时器已经在运行中，需要返回
        if (timer) return;
        timer = setTimeout(() => {
            fn.apply(this, arguments);
            timer = null
        }, delay)
    }
}

// 防抖
// 首次运行时把定时器赋值给一个变量， 第二次执行时，
// 如果间隔没超过定时器设定的时间则会清除掉定时器， 
// 重新设定定时器， 依次反复， 当我们停止下来时，
// 没有执行清除定时器， 超过一定时间后触发回调函数。
function debounce(fn, delay = 100) {
    var timer = null;
    return function () {
        if (timer) clearTimeout(timer)
        timer = setTimeout(() => {
            fn.apply(this, arguments);
            timer = null
        }, delay)
    }
}
// 使用方法举例
// 1、老模块滚动事件
// 页面script或者require引入js：libs/throttleDebounce/index.js
// function handle() {            
// 　　console.log(‘测试‘);        
// }        
// window.addEventListener(‘scroll‘, debounce(handle, 1000));
// 2、新模块滚动事件
// require(‘libs/throttleDebounce/index.js‘);
// getMessage: debounce(function () {
//     console.log("测试"")
// }, 1000)

/**
 * 这里是模块说明
 * @module 节流防抖公用小插件，vue单页面可以使用
 * @author zhangjiwen
 * @date 2020-07-04
 * @requires  无//模块依赖
 */
// 节流
// 思路： 第一次先设定一个变量true，
// 第二次执行这个函数时，会判断变量是否true，
// 是则返回。当第一次的定时器执行完函数最后会设定变量为flase。
// 那么下次判断变量时则为flase，函数会依次运行。
//这里是index.js
export throttle = function(fn, delay = 100) {
    //首先设定一个变量，在没有执行我们的定时器时为null
    var timer = null;
    return function () {
        //当我们发现这个定时器存在时，则表示定时器已经在运行中，需要返回
        if (timer) return;
        timer = setTimeout(() => {
            fn.apply(this, arguments);
            timer = null
        }, delay)
    }
}

// 防抖
// 首次运行时把定时器赋值给一个变量， 第二次执行时，
// 如果间隔没超过定时器设定的时间则会清除掉定时器， 
// 重新设定定时器， 依次反复， 当我们停止下来时，
// 没有执行清除定时器， 超过一定时间后触发回调函数。
//这里是index.js
export debounce = function(fn, delay = 100) {
    var timer = null;
    return function () {
        if (timer) clearTimeout(timer)
        timer = setTimeout(() => {
            fn.apply(this, arguments);
            timer = null
        }, delay)
    }
}
// 使用方法举例
// import {debounce} from "@/comment/debounce/index.js" //防抖引入（节流同理使用）
// getMessage: debounce(function () {
//     console.log("测试"")
// }, 1000)