前言
防抖和節(jié)流的目的都是為了減少不必要的計(jì)算，不浪費(fèi)資源，只在適合的時候再進(jìn)行觸發(fā)計(jì)算。
一、函數(shù)防抖
定義
在事件被觸發(fā)n秒后再執(zhí)行回調(diào)，如果在這n秒內(nèi)又被觸發(fā)，則重新計(jì)時；典型的案例就是輸入搜索：輸入結(jié)束后n秒才進(jìn)行搜索請求，n秒內(nèi)又輸入的內(nèi)容，就重新計(jì)時。
原理
函數(shù)防抖的基本思想是設(shè)置一個定時器，在指定時間間隔內(nèi)運(yùn)行代碼時清楚上一次的定時器，并設(shè)置另一個定時器，知道函數(shù)請求停止并超過時間間隔才會執(zhí)行。
使用場景
文本框輸入搜索（連續(xù)輸入時避免多次請求接口）
代碼實(shí)現(xiàn)
/**
* 函數(shù)防抖
*/
export function debounce(fn, delay) {
// 記錄上一次的延時器
var timer = null;
var delay = delay || 200;
return function() {
var args = arguments;
var that = this;
// 清除上一次延時器
clearTimeout(timer)
timer = setTimeout(function() {
fn.apply(that,args)
}, delay);
}
}
二、函數(shù)節(jié)流
定義
規(guī)定在一個單位時間內(nèi)，只能觸發(fā)一次函數(shù)，如果這個單位時間內(nèi)觸發(fā)多次函數(shù)，只有一次生效； 典型的案例就是鼠標(biāo)不斷點(diǎn)擊觸發(fā)，規(guī)定在n秒內(nèi)多次點(diǎn)擊只有一次生效。
實(shí)現(xiàn)原理
其原理是用時間戳來判斷是否已到回調(diào)該執(zhí)行時間，記錄上次執(zhí)行的時間戳，然后每次觸發(fā) scroll 事件執(zhí)行回調(diào)，回調(diào)中判斷當(dāng)前時間戳距離上次執(zhí)行時間戳的間隔是否已經(jīng)到達(dá) 規(guī)定時間段，如果是，則執(zhí)行，并更新上次執(zhí)行的時間戳，
使用場景
resize、scroll、mousemove等事件觸發(fā)監(jiān)聽
代碼實(shí)現(xiàn)
/**
* 函數(shù)節(jié)流
*/
export function throttle(fn,delay){
var lastTime;
var timer;
var delay = delay || 200;
return function() {
var args = arguments;
// 記錄當(dāng)前函數(shù)觸發(fā)的時間
var nowTime = Date.now();
if (lastTime && nowTime - lastTime < delay) {
clearTimeout(timer);
timer = setTimeout(function () {
// 記錄上一次函數(shù)觸發(fā)的時間
lastTime = nowTime;
// 修正this指向問題
fn.apply(this, args);
}, delay);
}else{
lastTime = nowTime;
fn.apply(this, args);
}
}
}
三、在vue中如何使用
新建common.js文件
/**
* 函數(shù)防抖
*/
export function debounce(fn, delay) {
// 記錄上一次的延時器
var timer = null;
var delay = delay || 200;
return function() {
var args = arguments;
var that = this;
// 清除上一次延時器
clearTimeout(timer)
timer = setTimeout(function() {
fn.apply(that,args)
}, delay);
}
}
/**
* 函數(shù)節(jié)流
*/
export function throttle(fn,delay){
var lastTime;
var timer;
var delay = delay || 200;
return function() {
var args = arguments;
// 記錄當(dāng)前函數(shù)觸發(fā)的時間
var nowTime = Date.now();
if (lastTime && nowTime - lastTime < delay) {
clearTimeout(timer);
timer = setTimeout(function () {
// 記錄上一次函數(shù)觸發(fā)的時間
lastTime = nowTime;
// 修正this指向問題
fn.apply(this, args);
}, delay);
}else{
lastTime = nowTime;
fn.apply(this, args);
}
}
}
在vue組件中引入
import {debounce,throttle} from '../common/common.js'
組件完整代碼示例
<template>
<div>
<div @click="handleClick1" style="width: 100px;height: 100px;background-color: yellow;">防抖函數(shù)</div>
<div @click="handleClick2" style="width: 100px;height: 100px;background-color: red;">節(jié)流函數(shù)</div>
</div>
</template>
<script>
import {debounce,throttle} from '../common/common.js'
export default{
data() {
return {
}
},
methods:{
handleClick1:debounce(function(){
console.log('業(yè)務(wù)邏輯1 -- ：', Math.random())
},2000),
handleClick2:throttle(function(){
console.log('業(yè)務(wù)邏輯2 -- ：', Math.random())
},2000)
}
}
</script>
<style>
</style>
