vue节流和防抖

观玥

已于 2022-10-08 20:16:12 修改

阅读量1.2k

点赞数

分类专栏：前端文章标签：前端

于 2022-10-05 09:24:37 首次发布

本文链接：https://blog.csdn.net/m0_74080008/article/details/127164698

版权

节流

节流是间隔执行，在定时器到时间后再清空定时器，函数将每个 n 秒执行一次；

在内部定义一个定时器和一个开关变量，初始化变量为true ，

执行定期器前判断变量是否false 就return ；

为true 如果是继续执行，并且把变量赋值为false；

在定时器内部调用函数后，把变量设为true。

1）方法一

/**

节流原理：在一定时间内，只能触发一次

@param {Function} func 要执行的回调函数
@param {Number} wait 延时的时间
@param {Boolean} immediate 是否立即执行
@return null
*/

let timer, flag;

function throttle(func, wait = 500, immediate = true) {

if (immediate) {

if (!flag) {

flag = true;

// 如果是立即执行，则在wait毫秒内开始时执行

typeof func === 'function' && func();

timer = setTimeout(() => {

flag = false;

}, wait);

}

} else {

if (!flag) {

flag = true

// 如果是非立即执行，则在wait毫秒内的结束处执行

timer = setTimeout(() => {

flag = false

typeof func === 'function' && func();

}, wait);

}

}

};