underscore.js js實(shí)用庫(kù)
CDN鏈接
https://cdn.bootcss.com/underscore.js/1.9.1/underscore.js
underscore.js中文文檔
官方中文文檔
根據(jù)underscore.js庫(kù)分析學(xué)習(xí)高質(zhì)量的防抖節(jié)流函數(shù)源碼。
防抖
注意：由于對(duì)知識(shí)的加深理解與學(xué)習(xí)，本人又重新更新了本文章
事件響應(yīng)函數(shù)在一段事件后才執(zhí)行，如果在這段時(shí)間內(nèi)再次調(diào)用，則重新計(jì)算執(zhí)行時(shí)間；當(dāng)預(yù)定的時(shí)間內(nèi)沒有再次調(diào)用該函數(shù)，則執(zhí)行事件響應(yīng)函數(shù)（自我理解：在停止觸發(fā)一定時(shí)間后在執(zhí)行邏輯代碼）
應(yīng)用場(chǎng)景
- scroll事件滾動(dòng)觸發(fā)
- 搜索框輸入查詢
- 表單驗(yàn)證（表單信息輸入完才驗(yàn)證）
- 按鈕提交事件
- 瀏覽器窗口縮放，resize事件
第一版本
這些代碼做基本的防抖是沒問題的。
image.png
但為了使代碼更加強(qiáng)壯??，需要在第二版本解決兩個(gè)問題：1、執(zhí)行函數(shù)中this默認(rèn)指向window問題；2、執(zhí)行函數(shù)中事件對(duì)象event默認(rèn)指向?yàn)閡ndefined問題
image.png
第二版本
image.png
image.png
第三版本 傳入第三個(gè)參數(shù)(該參數(shù)為布爾值，默認(rèn)不傳為false)實(shí)現(xiàn)鼠標(biāo)移入立即執(zhí)行需求
image.png
第三版本 防抖函數(shù)中的返回值和取消防抖操作
image.png
節(jié)流(更新中。。。)
原理：如果你持續(xù)觸發(fā)事件，每隔一段時(shí)間，只執(zhí)行一次事件(自我理解：不斷觸發(fā)期間只在一定時(shí)間間隔才會(huì)執(zhí)行邏輯代碼)
應(yīng)用場(chǎng)景
1.DOM元素的拖拽功能實(shí)現(xiàn)
- 射擊游戲
- 計(jì)算鼠標(biāo)移動(dòng)的距離
- 監(jiān)聽scroll滾動(dòng)事件
第一版本 利用時(shí)間戳簡(jiǎn)單實(shí)現(xiàn)一版（鼠標(biāo)首次滑動(dòng)觸發(fā)，結(jié)束不會(huì)被調(diào)用觸發(fā)函數(shù)）
image.png
第二版本 利用定時(shí)器實(shí)現(xiàn)--鼠標(biāo)進(jìn)入第一次不會(huì)觸發(fā)，鼠標(biāo)離開最后一次會(huì)觸發(fā)
image.png
第三版 結(jié)合頭兩版本實(shí)現(xiàn) 第一次會(huì)觸發(fā)，最后一次也會(huì)觸發(fā)
image.png
第四版本 傳入第三個(gè)參數(shù)來(lái)控制3種情況下代碼的執(zhí)行結(jié)果
image.png
