函數(shù)的節(jié)流與防抖
概念
- 事件頻繁觸發(fā)可能造成的問題?
- 一些瀏覽器事件:window.onresize、window.mousemove等异雁，觸發(fā)的頻率非常高，會(huì)造成界面卡頓
- 如果向后臺(tái)發(fā)送請(qǐng)求僧须，頻繁觸發(fā)纲刀，對(duì)服務(wù)器造成不必要的壓力
- 如何限制事件處理函數(shù)頻繁調(diào)用
- 函數(shù)節(jié)流
- 函數(shù)防抖
- 函數(shù)節(jié)流(throttle)
- 理解:
- 在函數(shù)需要頻繁觸發(fā)時(shí): 函數(shù)執(zhí)行一次后，只有大于設(shè)定的執(zhí)行周期后才會(huì)執(zhí)行第二次
- 適合多次事件按時(shí)間做平均分配觸發(fā)
- 場(chǎng)景：
- 窗口調(diào)整（resize）
- 頁面滾動(dòng)（scroll）
- DOM 元素的拖拽功能實(shí)現(xiàn)（mousemove）
- 搶購瘋狂點(diǎn)擊（click）
- 理解:
- 函數(shù)防抖(debounce)
- 理解:
- 在函數(shù)需要頻繁觸發(fā)時(shí): 在規(guī)定時(shí)間內(nèi)担平，只讓最后一次生效示绊，前面的不生效。
- 適合多次事件一次響應(yīng)的情況
- 場(chǎng)景:
- 輸入框?qū)崟r(shí)搜索聯(lián)想（keyup/input）
- 理解:
實(shí)現(xiàn)
防抖
function throttle(callback, wait) {
// 定義開始時(shí)間
let start = 0
// 返回一個(gè)函數(shù)
return function(event) {
// 獲取當(dāng)前時(shí)間戳
let now = Date.now()
// 判斷
if (now - start >= wait) {
// 若滿足條件暂论，則執(zhí)行回調(diào)
callback.call(this, event)
// 刷新開始時(shí)間
start = now
}
}
}
節(jié)流
function debounce(callback, time) {
// 定時(shí)器變量
let timer = null
// 返回一個(gè)函數(shù)
return function(event) {
// 判斷
if (timer !== null) {
// 清空定時(shí)器
clearTimeout(timer)
}
// 啟動(dòng)定時(shí)器
timer = setTimeout(() => {
// 執(zhí)行回調(diào)
callback.call(this, event)
// 重置定時(shí)器
timer = null
}, time)
}
}
測(cè)試
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
height: 5000px;
}
</style>
</head>
<body>
<input type="text" class="input">
<script>
// 節(jié)流測(cè)試
document.addEventListener('scroll', throttle(function(e) {
console.log(e)
}, 500))
// 防抖測(cè)試
document.querySelector('.input').addEventListener('keydown', debounce(function(e) {
console.log(e.target.value)
}, 1000))
</script>
</body>
</html>
