1、防抖
指觸發(fā)事件后在n秒后函數(shù)執(zhí)行，如果在n秒內(nèi)又觸發(fā)了事件，則會(huì)重新計(jì)算函數(shù)執(zhí)行時(shí)間。應(yīng)用場(chǎng)景（適合多次事件只響應(yīng)一次的情況）：給按鈕加防抖函數(shù)防止表單多次提交；判斷scroll是否滑到底部；對(duì)于輸入框連續(xù)輸入進(jìn)行AJAX驗(yàn)證時(shí)，用函數(shù)防抖能有效減少請(qǐng)求次數(shù)。
現(xiàn)給一個(gè)場(chǎng)景：現(xiàn)監(jiān)聽(tīng)一個(gè)輸入框，文字變化后觸發(fā)change事件。若直接用keyup事件，則會(huì)頻繁觸發(fā)change事件。加了防抖后，用戶輸入結(jié)束或暫停時(shí)，才會(huì)觸發(fā)change事件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="text" id="input1">
</body>
<script>
const input1 = document.getElementById('input1')
//1、不加防抖 ，會(huì)一直觸發(fā)change事件
input1.addEventListener('keyup', function(){
console.log(input1.value)
})
//2、簡(jiǎn)單實(shí)現(xiàn)防抖
let timer = null
input1.addEventListener('keyup', function(){
if(timer){
clearTimeout(timer)
}
timer = setTimeout(() => {
//模擬觸發(fā)change事件
console.log(input1.value)
//清空定時(shí)器
timer = null
}, 1000)
})
//3、將防抖函數(shù)這個(gè)工具進(jìn)行封裝
function debounce(fn, delay = 50){
//timer是閉包中的,不能被別人修改
let timer = null
return function(){
if(timer){
clearTimeout(timer)
}
timer = setTimeout(() => {
fn.apply(this, arguments)
timer = null
}, delay)
}
}
input1.addEventListener('keyup', debounce(function(){
console.log(input1.value)
}, 600))
</script>
</html>
則封裝后的防抖函數(shù)為：
function debounce(fn, delay = 50){
let timer = null //timer是閉包中的,不能被別人修改
return function(){
if(timer){
clearTimeout(timer)
}
timer = setTimeout(() => {
fn.apply(this, arguments)
timer = null
}, delay)
}
}
2、節(jié)流
連續(xù)發(fā)送的事件在n秒內(nèi)只執(zhí)行一次函數(shù)。應(yīng)用場(chǎng)景（適合大量事件按時(shí)間做平均分配觸發(fā)）：DOM元素拖拽；Canvas畫(huà)筆功能。
現(xiàn)給一個(gè)場(chǎng)景：拖拽一個(gè)元素，要隨時(shí)拿到該元素被拖拽的位置。若直接用drag事件，則會(huì)頻繁觸發(fā)，很容易導(dǎo)致卡頓。加了節(jié)流后，無(wú)論拖拽速度多快，都會(huì)每隔固定時(shí)間觸發(fā)一次。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#div1{
border: 1px solid #ccc;
width: 200px;
height: 100px;
}
</style>
</head>
<body>
<div id = "div1" draggable="true">可拖拽</div>
<script>
const div1 = document.getElementById('div1')
//1、簡(jiǎn)單實(shí)現(xiàn)節(jié)流
let timer = null
div1.addEventListener('drag', function(e){
if(timer){
return
}
timer = setTimeout(() => {
console.log(e.offsetX, e.offsetY)
timer = null //定時(shí)器執(zhí)行了，才讓timer為空
}, 1000)
})
//2、將節(jié)流函數(shù)這個(gè)工具進(jìn)行封裝
function throttle(fn, delay = 100){
let timer = null
return function(){
if(timer){
return
}
timer = setTimeout(() => {
fn.apply(this, arguments)
timer = null
},delay)
}
}
div1.addEventListener('drag', throttle(function(e){ //形參e會(huì)傳給throttle函數(shù)運(yùn)行后返回的函數(shù)
console.log(e.offsetX, e.offsetY)
},200))
</script>
</body>
</html>
則封裝后的節(jié)流函數(shù)為：
function throttle(fn, delay = 100){
let timer = null
return function(){
if(timer){
return
}
timer = setTimeout(() => {
fn.apply(this, arguments)
timer = null
},delay)
}
}
