防抖与节流的原理、实现及优化
文章目錄
- 本文具體內(nèi)容已遷移至新博客：
- 一、防抖
- 1.1 定義
- 1.2 應(yīng)用場(chǎng)景
- 1.3 實(shí)現(xiàn)
- 使用第三方庫(kù)[underscore](https://underscorejs.org/)
- js手寫
- 二、節(jié)流
- 2.1 定義
- 2.2應(yīng)用場(chǎng)景
- 2.3 js實(shí)現(xiàn)
- 定時(shí)器版本
- 時(shí)間戳版本
- 三、防抖與節(jié)流區(qū)別
本文詳細(xì)介紹了防抖與節(jié)流的應(yīng)用與代碼實(shí)現(xiàn)、優(yōu)化。其中函數(shù)節(jié)流實(shí)現(xiàn)了定時(shí)器版本和時(shí)間戳版本，不同版本均有做優(yōu)化處理
本文具體內(nèi)容已遷移至新博客：
谷歌搜索：site:fryao.blogspot.com
Fryao
注：需科學(xué)上網(wǎng)才可訪問(wèn)
一、防抖
1.1 定義
防抖指只有在n秒內(nèi)沒(méi)有再次觸發(fā)某個(gè)函數(shù)時(shí)，才會(huì)真正執(zhí)行這個(gè)函數(shù)；若n秒內(nèi)再次觸發(fā)此函數(shù)，則重新計(jì)算時(shí)間，如：在進(jìn)行搜索的時(shí)候，當(dāng)用戶停止輸入后才調(diào)用方法節(jié)約請(qǐng)求資源
1.2 應(yīng)用場(chǎng)景
- 輸入框中頻繁的輸入內(nèi)容，搜索或者提交信息；
- 頻繁的點(diǎn)擊按鈕，觸發(fā)某個(gè)事件；
- 監(jiān)聽(tīng)瀏覽器滾動(dòng)事件完成操作；
- 用戶縮放瀏覽器的resize事件(瀏覽器窗口大小發(fā)生變化時(shí)觸發(fā))
1.3 實(shí)現(xiàn)
使用第三方庫(kù)underscore
js手寫
<body><input type="text"><button id="cancel">取消</button></body>防抖功能的基本實(shí)現(xiàn)
優(yōu)化防抖函數(shù)：增加立即執(zhí)行效果
優(yōu)化防抖函數(shù)：增加取消效果（點(diǎn)擊取消按鈕取消發(fā)送請(qǐng)求）
二、節(jié)流
2.1 定義
節(jié)流指一定時(shí)間內(nèi)js方法會(huì)執(zhí)行一次，即執(zhí)行函數(shù)的頻率是固定的。類似于10 分鐘一趟的公交車，不管10 分鐘內(nèi)有多少人在公交站等，10 分鐘一到就會(huì)按時(shí)發(fā)車
2.2應(yīng)用場(chǎng)景
- 監(jiān)聽(tīng)頁(yè)面的滾動(dòng)事件；
- 鼠標(biāo)移動(dòng)事件；
- 用戶頻繁點(diǎn)擊按鈕操作；
- 游戲中的一些設(shè)計(jì)（如飛船發(fā)射導(dǎo)彈的頻率）
2.3 js實(shí)現(xiàn)
定時(shí)器版本
定時(shí)器版本的節(jié)流函數(shù)具有兩個(gè)特點(diǎn):
節(jié)流功能的基本實(shí)現(xiàn)
節(jié)流優(yōu)化：增加取消請(qǐng)求和立即執(zhí)行
時(shí)間戳版本
時(shí)間戳版本的節(jié)流函數(shù)具有兩個(gè)特點(diǎn):
三、防抖與節(jié)流區(qū)別
相同點(diǎn)：防抖節(jié)流的出現(xiàn)是為了解決頻繁觸發(fā)某個(gè)事造成的性能消耗的問(wèn)題，使網(wǎng)絡(luò)請(qǐng)求在合適的情況下發(fā)送
區(qū)別：兩者區(qū)別在于節(jié)流是固定時(shí)間做某一件事，比如每隔n秒發(fā)一次請(qǐng)求；而防抖是在頻繁觸發(fā)時(shí)只執(zhí)行一次（兩者的前提都是頻繁觸發(fā)）
總結(jié)
以上是生活随笔為你收集整理的防抖与节流的原理、实现及优化的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： Java实现OPC通信
- 下一篇： 网络安全常用的主流数据库（DBMS）✍