1. 防抖和节流概述
对于防抖,就是指触发事件后 n 秒后才执行函数,如果在 n 秒内又触发了事件,则会重新计算函数执行时间。具体效果是,如果我们高频率地触发该事件,函数执行会被一直延迟,在最后一次触发事件的n秒后该函数会被执行一次。
对于节流,就是不管触发事件的频率如何,函数在n秒内最多执行一次。具体效果是,如果我们持续高频率地触发该事件,该函数的执行频率会接近n秒钟一次。
2. 工具类封装
防抖类和节流类代码如下:
类的使用非常简单,在构造方法中传入事件处理函数和时间间隔数值,生成防抖或节流对象,在每次事件触发时调用该对象的excute()方法,事件处理函数就会自动按照防抖或节流的方式执行。
// 防抖
export class Debounce{
private timeout:number
private task:() => void
private setTimeoutId:any = 0
constructor(task:() => void, timeDelay:number){
this.setTimeoutId
this.task = task
this.timeout = timeDelay
}
public excute(){
clearTimeout(this.setTimeoutId)
this.setTimeoutId = setTimeout(() => {
this.task()
}, this.timeout);
}
}
// 节流
export class Throttle{
private timeout:number
private task:() => void
private setTimeoutId:any = 0
private ok = true //是否执行
constructor(task:() => void, timeDelay:number){
this.setTimeoutId
this.task = task
this.timeout = timeDelay
}
public excute(){
if(this.ok){
this.task()
this.ok = false
setTimeout(() => {
this.ok = true
}, this.timeout);
}
}
}
3. 使用样例
3.1 数字增加,防抖和节流
效果图:
vue模板代码如下:
<template>
<div>
<div>
数字:{
{ num }}
</div>
<button @click="debounceAdd.excute()">防抖,数字加一</button>
<button @click="throttleAdd.excute()">节流,数字加一</button>
</div>
</template>
ts代码如下:
<script setup lang="ts">
import {
ref } from '@vue/reactivity'
import {
Debounce, Throttle} from '../../util/excuteFunc'
const num = ref(1)
const debounceAdd = new Debounce(add, 1000)
const throttleAdd = new Throttle(add, 1000)
function add(){
num.value++
}
</script>
3.2 监听resize事件,防抖
监听浏览器窗口变化,如果窗口大小发生变化后一秒内没有再次发生变化,那么执行处理窗口大小变化的代码。
不使用防抖的代码:
window.onresize = function(e){
console.log('窗口大小发生了变化,resize事件对象为:')
console.log(e)
}
使用防抖的代码:
let debounceResizeHandler:Debounce
window.onresize = function(e){
if(!debounceResizeHandler){
//如果还未初始化防抖对象,则初始化防抖对象
debounceResizeHandler = new Debounce(() => {
// 处理窗口大小变化的代码
console.log('窗口大小发生了变化,resize事件对象为:')
console.log(e)
}, 1000)
}
debounceResizeHandler.excute()
}
主流的防抖节流写法
上面返回防抖和节流对象的写法好像很少见,目前大家都喜欢用的还是返回一个防抖和节流的函数。
export function ToDebounce(fn:Function, timeout:number){
let id = 0
return function(...args:any[]){
clearTimeout(id)
id = setTimeout(() => {
fn(...args)
}, timeout);
}
}
export function ToThrottle(fn:Function, timeout:number, ...args:any[]){
let id = 0
let excute = true // 是否可以执行函数
return function(...args:any[]){
if(excute){
fn(...args)
excute = false
setTimeout(() => {
excute = true
}, timeout);
}
}
}