js、vue节流防抖使用方法(附带vue单页面、多页面使用实力)亲测可用
2021-01-25 23:13
标签:Requires led libs hand dde scroll style 赋值 没有 js、vue节流防抖使用方法(附带vue单页面、多页面使用实力)亲测可用 标签:Requires led libs hand dde scroll style 赋值 没有 原文地址:https://www.cnblogs.com/jwzhang/p/13234587.html/**
* 这里是模块说明
* @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)
下一篇:PHP获取指定的时间戳【转】
文章标题:js、vue节流防抖使用方法(附带vue单页面、多页面使用实力)亲测可用
文章链接:http://soscw.com/index.php/essay/47003.html