一、理解防抖和節(jié)流
防抖：在單位時(shí)間內(nèi)頻繁觸發(fā)事件，只有最后一次生效
比如：在游戲回城的時(shí)候被打斷，再次點(diǎn)回城就會重新計(jì)時(shí)，最終只有沒被打斷的最后一次，才能成功回城，就是防抖
節(jié)流：在單位時(shí)間內(nèi)頻繁觸發(fā)事件，只生效一次（也就是只有第一次生效）
比如：鼠標(biāo)點(diǎn)擊下一張輪播圖，不管單位時(shí)間內(nèi)連續(xù)點(diǎn)擊了多少次，輪播圖都是2秒換下一張，就是節(jié)流
防抖和節(jié)流都是性能優(yōu)化的一種手段
二、相同點(diǎn)
1.都可以通過使用 setTimeout 來實(shí)現(xiàn)
2.都可以降低回調(diào)執(zhí)行頻率，節(jié)省計(jì)算資源
三、不同點(diǎn)
1.定義不同
函數(shù)防抖：一段時(shí)間內(nèi)連續(xù)觸發(fā)事件，只執(zhí)行最后一次
函數(shù)節(jié)流：一段事件內(nèi)只執(zhí)行一次
2.應(yīng)用場景不同
防抖：（1）手機(jī)號、郵箱地址的校驗(yàn) （2）當(dāng)用戶input框輸入完成后再發(fā)請求，如搜索等
節(jié)流： 高頻事件，如：多少秒之后獲取驗(yàn)證碼、resize 事件和scroll 事件等
四、代碼實(shí)現(xiàn)
1.防抖：
<body>
? <input type="text" id="i">
? <script>
? ? // 1.防抖
? ? document.querySelector('#i').addEventListener('input', () => {
? ? ? debounce()
? ? })
? ? let timeId = null
? ? const debounce = () => {
? ? ? clearTimeout(timeId)
? ? ? timeId = setTimeout(() => {
? ? ? ? console.log("防抖最后一次輸出");
? ? ? }, 1000)
? ? }
? </script>文章來源：http://www.zghlxwxcb.cn/news/detail-441695.html
</body>文章來源地址http://www.zghlxwxcb.cn/news/detail-441695.html
?防抖實(shí)現(xiàn)效果：
2.節(jié)流：
<body>
? ?<input type="button" id="btn" value="獲取驗(yàn)證碼">
? <script>
? ?
// 2.節(jié)流
? ? let flag = true // 設(shè)置控制開關(guān)
? ? let timeId = null
? ? const inp = document.querySelector('#btn')
? ? inp.addEventListener("click", () => {
? ? ? if (!flag) {
? ? ? ? return
? ? ? }
? ? ? flag = false
? ? ? let s = 5
? ? ? timeId = setInterval(() => {
? ? ? ? s -= 1
? ? ? ? if (s < 1) {
? ? ? ? ? inp.value = '獲取驗(yàn)證碼'
? ? ? ? ? flag = true
? ? ? ? ? s = 5
? ? ? ? ? clearInterval(timeId)
? ? ? ? } else {
? ? ? ? ? inp.value = s + '秒后再次獲取驗(yàn)證碼'
? ? ? ? }
? ? ? }, 1000)
? ? })
? </script>
</body>
到了這里，關(guān)于防抖和節(jié)流有什么區(qū)別?的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
