節(jié)流：一段時間內(nèi)，只執(zhí)行一次某個操作，過了這段時間洒缀，還有操作的話，繼續(xù)執(zhí)行新的操作
使用場景：
1）頁面滾動加載：在無限滾動的頁面中欺冀，滾動事件會頻繁觸發(fā)树绩，使用節(jié)流可以控制數(shù)據(jù)加載的頻率，防止短時間內(nèi)多次加載數(shù)據(jù)隐轩，提高頁面加載性能
2）按鈕防重復(fù)點擊：當(dāng)用戶點擊按鈕執(zhí)行某個操作時饺饭，使用節(jié)流可以確保按鈕在一定時間內(nèi)只能觸發(fā)一次，防止用戶重復(fù)點擊造成誤操作职车。
<div class="box" style="width: 100px;height: 100px;background: skyblue" draggable="true"></div>
<script>
// 節(jié)流: 一段時間內(nèi), 只執(zhí)行一次某個操作,過了這一段時間,還有操作的話 繼續(xù)執(zhí)行新的操作
function throttle(fn){
let timer = null;
return function(){
if(timer){
return;
}
timer = setTimeout(()=>{
fn();
timer = null;
},200)
}
}
const boxDom = document.querySelector('.box');
boxDom.addEventListener('drag',throttle(function(e){
console.log('drag===========');
}))
</script>
防抖：就是指觸發(fā)事件后在 n 秒內(nèi)函數(shù)只能執(zhí)行一次砰奕，如果在 n 秒內(nèi)又觸發(fā)了事件，則會重新計算函數(shù)執(zhí)行時間提鸟。
使用場景：
1）搜索框?qū)崟r搜索：在搜索框中輸入關(guān)鍵詞時军援，防抖可以延遲請求發(fā)送，只在用戶輸入完成或者停頓一段時間后才觸發(fā)實際的搜索請求称勋，避免頻繁的網(wǎng)絡(luò)請求胸哥。
2）窗口大小調(diào)整：當(dāng)用戶調(diào)整瀏覽器窗口大小時，窗口大小變化事件會連續(xù)觸發(fā)赡鲜，使用防抖可以確保只在用戶完成調(diào)整后再執(zhí)行相應(yīng)的響應(yīng)邏輯空厌，以避免過多的布局計算庐船。
function debounce(fn,delay){
let timer = null;
return function(){
clearInterval(timer);
timer = setTimeout(()=>{
fn.apply(this,arguments);
},delay)
}
}
const inputDom = document.querySelector('.ipt');
// inputDom.addEventListener('input', function(){
// console.log('wwwwwwwwwwww0');
// })
inputDom.addEventListener('input', debounce(function(e){
console.log('this---',this);
console.log('e---',e);
console.log('發(fā)送搜索請求')
},500))
防抖和節(jié)流在不同的應(yīng)用場景中展現(xiàn)出其重要性。防抖適用于需要等待用戶操作完成或者停頓后才進(jìn)行相應(yīng)處理的情況嘲更，如搜索框?qū)崟r搜索和窗口大小調(diào)整筐钟。節(jié)流則適用于需要限制事件觸發(fā)頻率的情況，如頁面滾動加載和按鈕點擊赋朦。根據(jù)具體需求篓冲，選擇合適的技術(shù)可以優(yōu)化用戶體驗、減少不必要的資源消耗宠哄，從而提升前端應(yīng)用的性能壹将。
