js、vue節流防抖使用方法（附帶vue單頁面、多頁面使用實力）親測可用

/**
 * 這里是模塊說明
 * @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)