function count() {
ele.innerHTML = num++
}
防抖:在事件被觸發(fā)n秒后再執(zhí)行回調(diào)拼缝，如果在這n秒內(nèi)又被觸發(fā)，則重新計(jì)時(shí)彰亥。
- 給按鈕加函數(shù)防抖防止表單多次提交咧七。
- 對(duì)于輸入框連續(xù)輸入進(jìn)行AJAX驗(yàn)證時(shí)，用函數(shù)防抖能有效減少請(qǐng)求次數(shù)任斋。
- 判斷scroll是否滑到底部继阻，滾動(dòng)事件+函數(shù)防抖
//防抖
function debounce(func, wait) {//輸入完畢后過(guò)2秒執(zhí)行
let timeout; //定時(shí)器
return function() {
if (timeout) clearTimeout(timeout) //清楚定時(shí)器取消任務(wù)
timeout = setTimeout(function() {
func.apply(this) //執(zhí)行func函數(shù)
}, wait)
}
}
ele.onmousemove = debounce(count, 2000)
節(jié)流:規(guī)定一個(gè)單位時(shí)間，在這個(gè)單位時(shí)間內(nèi)，只能有一次觸發(fā)事件的回調(diào)函數(shù)執(zhí)行瘟檩，如果在同一個(gè)單位時(shí)間內(nèi)某事件被觸發(fā)多次抹缕，只有一次能生效。
- 游戲中的刷新率
- DOM元素拖拽
- Canvas畫筆功能
//節(jié)流
function throttle(func, wait) {//使用定時(shí)器方式墨辛，固定時(shí)間內(nèi)執(zhí)行函數(shù)
let timeout; //定時(shí)器
return function() {
if(!timeout) { //是否存在定時(shí)器
timeout = setTimeout(() => {
timeout = null
func.apply(this)
},wait)
}
}
}
ele.onmousemove = throttle(count, 2000)
