#btn {
width: 100px;
padding: 5px 20px;
color: #fff;
border-radius: 5px;
text-align: center;
background: #f77a7a;
}
<div id="btn">点我啊</div>
<p id="content">点了0次</p>
let num = 1
document.getElementById('btn').onclick = debounce(count, 1000, false) // 调用防抖函数
function count() {
document.getElementById('content').innerText = `点了${num++}次`
}
防抖函数
防抖函数原理:在事件被触发n秒后再执行回调,如果在这n秒内又被触发,则重新计时。
适用场景:
按钮提交场景:防止多次提交按钮,只执行最后提交的一次
服务端验证场景:表单验证需要服务端配合,只执行一段连续的输入事件的最后一次,还有搜索联想词功能类似
生存环境请用lodash.debounce
/**
* @desc 函数防抖
* @param fn 函数
* @param delay 延迟执行毫秒数
* @param immediate true 表立即执行,false 表非立即执行
*/
function debounce(fn, delay, immediate) {
let timer
return (...args) => {
clearTimeout(timer)
if (immediate) {
var callNow = !timer
timer = setTimeout(() => {
timer = null
}, delay)
if (callNow) fn.apply(this, args)
} else {
timer = setTimeout(() => {
fn.apply(this, args)
}, delay)
}
}
}
节流函数
节流函数原理:规定在一个单位时间内,只能触发一次函数。如果这个单位时间内触发多次函数,只有一次生效。
对于节流,一般有两种方式可以实现,分别是时间戳版和定时器版。
适用场景:
拖拽场景:固定时间内只执行一次,防止超高频次触发位置变动
缩放场景:监控浏览器resize
动画场景:避免短时间内多次触发动画引起性能问题
/**
* @desc 函数节流
* @param fn 函数
* @param delay 延迟执行毫秒数
* @param type 1 表时间戳版,2 表定时器版
*/
function throttle(fn, delay = 500, type) {
let previous = 0
let flag = true
return (...args) => {
if (type === 1) {
let now = Date.now()
if (now - previous > delay) {
fn.apply(this, args)
previous = now
}
}
if (type === 2) {
if (!flag) return
flag = false
setTimeout(() => {
fn.apply(this, args)
flag = true
}, delay)
}
}
}