js、vue节流防抖使用方法(附带vue单页面、多页面使用实力)亲测可用

2021-01-25 23:13

阅读:657

标签:Requires   led   libs   hand   dde   scroll   style   赋值   没有   

/**
 * 这里是模块说明
 * @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)

 

js、vue节流防抖使用方法(附带vue单页面、多页面使用实力)亲测可用

标签:Requires   led   libs   hand   dde   scroll   style   赋值   没有   

原文地址:https://www.cnblogs.com/jwzhang/p/13234587.html


评论


亲,登录后才可以留言!