當(dāng)前位置：首頁(yè) > 前端技术 > HTML >内容正文

HTML

前端必备-防抖节流

發(fā)布時(shí)間：2024/1/23 HTML 31 豆豆

生活随笔收集整理的這篇文章主要介紹了前端必备-防抖节流小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

文章目錄

- 前端必備-防抖節(jié)流

前端必備-防抖節(jié)流

防抖節(jié)流—優(yōu)化思想

js中有一個(gè)工具：lodash 實(shí)現(xiàn)了防抖節(jié)流
防抖：debounce 、節(jié)流：throttle

函數(shù)防抖

原理：當(dāng)持續(xù)觸發(fā)一個(gè)事件時(shí)，在n秒內(nèi)，事件沒(méi)有再次觸發(fā)，此時(shí)才會(huì)執(zhí)行回調(diào)；如果n秒內(nèi)，又觸發(fā)了事件，就重新計(jì)時(shí)。

適用場(chǎng)景：

search遠(yuǎn)程搜索框：防止用戶不斷輸入過(guò)程中，不斷請(qǐng)求資源，n秒內(nèi)只發(fā)送1次，用防抖來(lái)節(jié)約資源
按鈕提交場(chǎng)景，比如點(diǎn)贊，表單提交等，防止多次提交
監(jiān)聽resize觸發(fā)時(shí)，不斷的調(diào)整瀏覽器窗口大小會(huì)不斷觸發(fā)resize，使用防抖可以讓其只執(zhí)行一次

輔助理解：在你坐電梯時(shí)，當(dāng)一直有人進(jìn)電梯（連續(xù)觸發(fā)），電梯門不會(huì)關(guān)閉，在一定時(shí)間間隔內(nèi)沒(méi)有人進(jìn)入（停止連續(xù)觸發(fā)）才會(huì)關(guān)閉。

函數(shù)節(jié)流

原理：當(dāng)頻繁的觸發(fā)一個(gè)事件，每隔一段時(shí)間，只會(huì)執(zhí)行一次事件。
適用場(chǎng)景：

拖拽場(chǎng)景：固定時(shí)間內(nèi)只執(zhí)行一次，防止高頻率的的觸發(fā)位置變動(dòng)
監(jiān)聽滾動(dòng)事件：實(shí)現(xiàn)觸底加載更多功能
屏幕尺寸變化時(shí)，頁(yè)面內(nèi)容隨之變動(dòng)，執(zhí)行相應(yīng)的邏輯
射擊游戲中的mousedown、keydown時(shí)間

<html> <head><title>防抖和節(jié)流</title><script src="https://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.15/lodash.min.js"></script> </head> <body><input id="search" type="text" /><div id="content" style="height:150px;line-height:150px;text-align:center;color:white;background-color:#333;"></div><script>//let search = document.getElementById("search");//let content = document.getElementById("content");//let num = 1;//function count(){// console.log("發(fā)送數(shù)據(jù)請(qǐng)求。。。");// content.innerHTML = num++;//}//search.onkeyup = _.debounce(count,2000); //防抖（再次輸入則重新計(jì)算取消定時(shí)器）復(fù)雜數(shù)據(jù)轉(zhuǎn)換-遞歸//search.onkeyup = _.throttle(count,2000); //節(jié)流（固定時(shí)間發(fā)送，不會(huì)重新計(jì)算）//若改造一下代碼var obj = {num:1,count:function(n){console.log("發(fā)送數(shù)據(jù)請(qǐng)求。。。",n);content.innerHTML = this.num++;}}//自己手寫代碼 //防抖function debounce(fn,time,num){ let timeout;return function(){if(timeout) clearTimeout(timeout)timeout = setTimeout(()=>{fn.apply(obj,[num]) //第一個(gè)參數(shù) 作用域//call(obj,num)//fn() //this指向?yàn)閣indows},time)}}search.onkeyup = debounce(obj.count,2000,10);//節(jié)流function throttle(fn,time){ let timeout; //第一次 undefined-falsereturn function(){//if(timeout==undefined || timeout==""){if(!timeout){ //自動(dòng)類型轉(zhuǎn)換timeout = setTimeout(()=>{ //setTimeout 延遲執(zhí)行//先清除之前的任務(wù)timeout = undefined;//調(diào)用函數(shù)fn.apply(obj)},time)}}}search.onkeyup = throttle(obj.count,2000);//time 先記錄一次時(shí)間再不斷對(duì)比function throttle2(fn,time){let prev = 0; //舊時(shí)間點(diǎn)return function(){let now = Date.now();if(new - prev > time){fn.apply(obj);prev = now;}}}search.onkeyup = throttle2(obj.count,2000);</script> </body> </html>

參考文獻(xiàn)：
https://mp.weixin.qq.com/s?__biz=MzAxMTMyOTk3MA==&mid=2456451562&idx=1&sn=73910cc04c9de46668869cc6f01068a3&chksm=8cdc1137bbab982139794193689c60e3485d9ba539cc48e8b95ca3ec9003f317f7742a716adb&mpshare=1&scene=24&srcid=0727lOUSK6DUauV84jIvUTJ7&sharer_sharetime=1627393410423&sharer_shareid=974ccd5c7437aef4c0fe1590ef081d17#rd

總結(jié)

以上是生活随笔為你收集整理的前端必备-防抖节流的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

防抖

上一篇： webpack：多文件、多环境、跨域处理
下一篇： React学习:入门实例-学习笔记