JavaScript 中的函數(shù)防抖（Debounce）和函數(shù)節(jié)流（Throttle）是兩種優(yōu)化頻繁觸發(fā)事件回調(diào)函數(shù)執(zhí)行的技術(shù)，它們主要用于限制函數(shù)調(diào)用的頻率，尤其是在處理高頻率觸發(fā)且響應(yīng)開銷較大的用戶交互場景時。

函數(shù)防抖 (Debounce)
防抖函數(shù)的主要作用是在連續(xù)快速觸發(fā)事件后，只有當(dāng)事件停止觸發(fā)一段時間（通常是最后一次觸發(fā)后的指定間隔）才會執(zhí)行一次回調(diào)。這種策略確保了在短時間內(nèi)大量重復(fù)觸發(fā)同一事件的情況下，只會執(zhí)行一次實(shí)際操作。例如，在搜索框輸入實(shí)時查詢的場景下，我們不希望用戶每輸入一個字符就發(fā)送一次請求，而是等用戶停止輸入一段時間后再發(fā)起請求。

簡單實(shí)現(xiàn)防抖函數(shù)的方式是通過設(shè)置一個定時器，每次事件觸發(fā)時清除上一次的定時器，并重新設(shè)定一個新的定時器，這樣只有最后一次觸發(fā)事件后的等待期滿才真正執(zhí)行函數(shù)。

<style>
.input {margin: 20px;
}#result {height: 150px;line-height: 150px;text-align: center;color: #081ee6e5;background-color: #cccccc;font-size: 80px;
}
</style>
<div class="input">文本內(nèi)容<input type="text" oninput="handleInput()" id="input">
</div>
<div id="result"></div><script>let inputVal = '';function handleInput() {inputVal = document.getElementById("input").value;// console.log(inputVal)let resultVal = document.getElementById("result");resultVal.innerHTML = inputVal;}function debounce(cont, wait) {let timeout = null;return function () {if (timeout) {clearTimeout(timeout);}timeout = setTimeout(() => {cont.apply(this);}, wait)}}document.getElementById("input").oninput = debounce(handleInput, 1000);</script>

函數(shù)節(jié)流 (Throttle)
函數(shù)節(jié)流則保證在一定時間內(nèi)只執(zhí)行一次函數(shù)，即使這段時間內(nèi)事件被多次觸發(fā)。不同于防抖的是，節(jié)流函數(shù)會按照固定的時間間隔去執(zhí)行，而不僅僅關(guān)注事件是否還在持續(xù)觸發(fā)。這對于那些需要維持一定頻率更新而又不想過于頻繁的情況非常有用，比如滾動事件監(jiān)聽、窗口大小改變時重新計算布局等。

簡單的節(jié)流函數(shù)實(shí)現(xiàn)可以使用定時器加上標(biāo)志位來控制函數(shù)執(zhí)行：

<div id="content2">機(jī)器學(xué)習(xí)是人工智能的一個分支，它主要基于計算機(jī)科學(xué)，旨在使計算機(jī)系統(tǒng)能夠自動地從經(jīng)驗(yàn)和數(shù)據(jù)中進(jìn)行學(xué)習(xí)并改進(jìn)， 而無需進(jìn)行明確的編程。機(jī)器學(xué)習(xí)算法通過構(gòu)建模型來處理和分析大量數(shù)據(jù)，以便能夠識別模式、進(jìn)行預(yù)測、做出決策或進(jìn)行其他類型的分析。
</div>
<script>let num2 = 1;let content2 = document.getElementById("content2");function handleView() {// content2.innerHTML = num2++;console.log('第' + num2++ + '次觸發(fā)節(jié)流');}content2.onmousemove = handleView;function throttle(cont2, wait) {let timeout;return function () {if (!timeout) {timeout = setTimeout(() => {timeout = null;cont2.apply(this);}, wait)}}}content2.onmousemove = throttle(handleView, 1000);</script>

總結(jié)來說，防抖是將多次執(zhí)行變?yōu)樽詈笠淮螆?zhí)行，節(jié)流是將多次執(zhí)行變?yōu)槊扛粢欢螘r間執(zhí)行。這兩種技術(shù)都能有效避免因?yàn)轭l繁調(diào)用函數(shù)而導(dǎo)致的性能問題。