节流(throttle)与防抖(debounce）（小程序、vue中节流方法）

节流与防抖（简单粗暴，拿来即用）

防抖和节流严格算起来应该属于性能优化的知识，但实际上遇到的频率相当高，处理不当或者放任不管就容易引起浏览器卡死。所以还是很有必要早点掌握的。

防抖和节流的区别：

节流是将多次执行变为每隔一段时间执行（多次点击，在时间内，只执行第一次）

防抖是将多次执行变为最后一次执行（多次点击，只执行最后一次）

 

（一）、函数的节流与防抖的封装使用

（1）创建一个public.js文件 存放节流方法

/** 1. 函数节流（分页加载点击事件使用） 2. @param fn 3. @param interval 4. @returns {Function} 5. @constructor */ export const Throttle = (fn, t) => { let last; let timer; let interval = t || 500; return function() { let args = arguments; let now = +new Date(); //等待执行 if (last && now - last < interval) { clearTimeout(timer); timer = setTimeout(() => { // fn.apply(this, args); //非立即执行，则在wait毫秒内的结束处执行，快速点击N下的时候不需要触发函数 last = now; }, interval); } else { fn.apply(this, args);//立即执行，则在wait毫秒内开始时执行 last = now; } } } /** * 函数防抖 （搜索框搜索使用） * @param fn * @param delay * @returns {Function} * @constructor */ export const Debounce = (fn, t) => { let delay = t || 500; let timer; return function() { let args = arguments; if (timer) { clearTimeout(timer); } timer = setTimeout(() => { timer = null; fn.apply(this, args); }, delay); } }; export const Debounce2 = (fn, t) => { let time = t || 500; let timeout = null; return function() { clearTimeout(timeout) timeout = setTimeout(() => { fn.apply(this, arguments); }, time); } };

（2）页面中引入public.js文件

import { Throttle,Debounce,Debounce2 } from "@/utils/public.js";

（3）节流事件的使用

/**搜索 Throttle(function( 参数 ) */ handleSearchList:Throttle(function(){ this.listQuery.pageNum = 1; this.getList(); console.log("搜索请求信息~ ",this.listQuery); },3000),

 

（二）、函数的节流与防抖的快捷使用法

（1）函数节流

函数节流（throttle）：当持续触发事件时，保证在一定时间内只调用一次事件处理函数

实现函数节流我们主要有两种方法：时间戳和定时器

时间戳方法： 利用时间戳让第一次执行事件，此后每隔3000ms 执行，小于这段时间不会执行

定时器方法：先将设置的定时器设置为null,第一次触发事件，达到时间后再执行这个函数，并初始化定时器

使用方法：先在data中定义字段，在methods中定义节流方法及使用 //定义节流时间（data中定义字段） preTime:0, /*节流方法（时间戳精简版） //1.先定义一个 preTime = 0 赋予初始值 ，为第一次点击 //2.获取当前时间戳 - preTime 判断是否大于延迟时间 //3.执行之后 将now 当前时间的时间戳进行赋值 preTime */ throttle(fn, delay = 3000) { let pre = this.preTime // 初始值是 0 let that = this return function() { let now = +new Date(); if (now - pre >= delay) { fn.apply(this, arguments) that.preTime = now; } } }, //使用方法 toSaveGoods(){ let that = this ; //节流方法 this.throttle(function(){ that.saveGoods();//执行的方法 },3000)() }, /** 节流方法集成版 * @param { function } func 函数 * @param { number } wait 延迟执行毫秒数 * @param { number } type 1 表时间戳版，2 表定时器版 */ 先定义要使用的属性（data中定义字段） previous：0, timeout:null, throttle_pro(func, wait ,type) { let that = this; console.log(' throttle_pro -->',type) let previous, timeout; if(type===1){ previous = this.previous; }else if(type===2){ timeout = this.timeout; } return function() { let context = this; // arguments 是一个对应于传递给函数的参数的类数组对象 let args = arguments; if(type===1){ let now = Date.now(); if (now - previous >= wait) { func.apply(context, args); that.previous = now; } }else if(type===2){ if (!timeout) { that.timeout = setTimeout(() => { that.timeout = null; func.apply(context, args) }, wait) } } } }, toPerformThrottle_pro(type){ let that = this; //节流方法 this.throttle_pro(function() { //that.saveGoods();//执行的方法 that.toPerform_pro(); }, 3000,type)() }, toPerform_pro(){ console.log(' 集成版的节流 '); }

效果展示：

 

（2）函数防抖

防抖（debounce）：所谓防抖，就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。

防抖函数分为：非立即执行版和立即执行版。

//防抖,定义一个定时器 （data中定义字段） debounce_timeout:null, //防抖优化版 d_timeout:null /* 函数的防抖 //( 滚动加载时使用较好，当持续触发事件时，一定时间段内没有再触发事件， //事件处理函数才会执行一次 ) */ debounce(fn, wait) { let that = this let timeout = this.debounce_timeout; //定义一个定时器 return function() { if(timeout !== null) clearTimeout(that.debounce_timeout); //清除这个定时器 that.debounce_timeout = setTimeout(fn, wait); } }, debouncePerform(){ let that = this; this.debounce(function() { that.debounceConsole(); }, 3000)() }, debounceConsole(){ console.log(' 执行防抖函数 '); }, /** * 函数防抖优化版 * @param { function } func * @param { number } wait 延迟执行毫秒数 * @param { boolean } immediate true 表立即执行，false 表非立即执行 */ debounce_pro(func,wait,immediate) { let that = this; let timeout = this.d_timeout; // 获取定义的定时器 return function () { let context = this; let args = arguments; if (timeout) clearTimeout(timeout); //有值，清除定时器任务 if (immediate) { let callNow = !timeout; that.d_timeout = setTimeout(() => { that.d_timeout = null; }, wait); if (callNow) func.apply(context, args) }else { that.d_timeout = setTimeout(() => { func.apply(context, args) }, wait); } } }, debouncePerformPro(immediate){ let that = this; this.debounce_pro(function() { that.debounceConsole(); }, 3000,immediate)() }

效果展示：