电脑知识|欧美黑人一区二区三区|软件|欧美黑人一级爽快片淫片高清|系统|欧美黑人狂野猛交老妇|数据库|服务器|编程开发|网络运营|知识问答|技术教程文章 - 好吧啦网

您的位置:首頁技術文章
文章詳情頁

js防抖函數和節流函數使用場景和實現區別示例分析

瀏覽:123日期:2024-05-13 09:21:20

本文實例講述了js防抖函數和節流函數使用場景和實現區別。分享給大家供大家參考,具體如下:

開發過程中,都遇到過某個事件被頻發觸發的場景,比如resize,scroll事件,input事件,而對應的事件處理函數也會被高頻率調用,這時會增加瀏覽器負擔,用戶體驗也不好,這也是防抖函數和節流函數存在的意義和使用場景。

函數防抖(debounce):

持續觸發事件時,在設定時間段內沒有被觸發,才去調用事件處理函數,在設定時間段內如果事件又被觸發,則不調用事件處理函數,并從觸發事件時間重新開始延時。

具體實現:

設計思路:在setTimeout中調用事件處理函數,如果在定時器觸發函數執行之前又觸發函數,清除定時器。

function debounce(fn, timeout){ timeout = timeout || 1000; let timer; return () => { if(timer){ clearTimeout(timer)} timer = setTimeout(() => { fn() },timeout) }} function printEvent(){ console.log(’1121212’)} window.addEventListener(’scroll’,debounce(printEvent,1000),false)

節流函數(throttle) throttle [’θrɑt(ə)l] 油門;節氣門;扼殺

當事件被持續觸發時,在設定時間內只讓事件處理函數觸發一次。

定時器實現模式:定時器在延時時間執行過后,重置為null, 定時器為null時,重新設置定時器,如此循環

//節流函數function throttle(fn, range){ range = range || 1000; let timer; return () => { //console.log(111,typeof timer) if(!timer){ timer = setTimeout( () => {fn()timer = null },range) } }} window.addEventListener(’mousemove’,throttle(printEvent,1000),false)

時間戳實現模式:初始化時獲取時間,每次觸發事件時再次獲取時間,兩次時間間隔等于或大于設定時間,執行事件,初始化時間重置為當前時間,如此循環。

//節流函數 時間戳模式var throttle2 = function(func, delay) {var prev = Date.now();return function() {var context = this;var args = arguments;var now = Date.now();if (now - prev >= delay) {func.apply(context, args);prev = Date.now();}}}

也可以使用時間戳加定時器結合實現:

總結:

函數防抖:在無事件觸發后的設定時間執行事件,將幾次操作合并為一此操作進行。這樣一來,只有最后一次操作能被觸發。

函數節流:使得一定時間內只觸發一次函數。原理是通過判斷是否到達一定時間來觸發函數。

區別: 函數節流不管事件觸發有多頻繁,都會保證在規定時間內一定會執行一次真正的事件處理函數,而函數防抖只是在最后一次事件后才觸發一次函數。

比如在頁面的無限加載場景下,我們需要用戶在滾動頁面時,每隔一段時間發一次 Ajax 請求,而不是在用戶停下滾動頁面操作時才去請求數據。這樣的場景,就適合用節流技術來實現。

感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運行工具:http://tools.jb51.net/code/HtmlJsRun測試上述代碼運行效果。

更多關于JavaScript相關內容可查看本站專題:《JavaScript常用函數技巧匯總》、《javascript面向對象入門教程》、《JavaScript錯誤與調試技巧總結》、《JavaScript數據結構與算法技巧總結》及《JavaScript數學運算用法總結》

希望本文所述對大家JavaScript程序設計有所幫助。

標簽: JavaScript
相關文章:
主站蜘蛛池模板: 合肥角钢_合肥槽钢_安徽镀锌管厂家-昆瑟商贸有限公司 | 冷藏车-东风吸污车-纯电动环卫车-污水净化车-应急特勤保障车-程力专汽厂家-程力专用汽车股份有限公司销售二十一分公司 | 水平筛厂家-三轴椭圆水平振动筛-泥沙震动筛设备_山东奥凯诺矿机 包装设计公司,产品包装设计|包装制作,包装盒定制厂家-汇包装【官方网站】 | 转向助力泵/水泵/发电机皮带轮生产厂家-锦州华一精工有限公司 | 青岛侦探_青岛侦探事务所_青岛劝退小三_青岛调查出轨取证公司_青岛婚外情取证-青岛探真调查事务所 | 广州中央空调回收,二手中央空调回收,旧空调回收,制冷设备回收,冷气机组回收公司-广州益夫制冷设备回收公司 | 舞台木地板厂家_体育运动木地板_室内篮球馆木地板_实木运动地板厂家_欧氏篮球地板推荐 | GEDORE扭力螺丝刀-GORDON防静电刷-CHEMTRONICS吸锡线-上海卓君电子有限公司 | 干粉砂浆设备-干粉砂浆生产线-干混-石膏-保温砂浆设备生产线-腻子粉设备厂家-国恒机械 | 火锅加盟_四川成都火锅店加盟_中国火锅连锁品牌十强_朝天门火锅【官网】 | 木材烘干机,木炭烘干机,纸管/佛香烘干设备-河南蓝天机械制造有限公司 | 超细|超微气流粉碎机|气流磨|气流分级机|粉体改性机|磨粉机|粉碎设备-山东埃尔派粉体科技 | 浇钢砖,流钢砖_厂家价低-淄博恒森耐火材料有限公司 | 防水试验机_防水测试设备_防水试验装置_淋雨试验箱-广州岳信试验设备有限公司 | 原子吸收设备-国产分光光度计-光谱分光光度计-上海光谱仪器有限公司 | 水成膜泡沫灭火剂_氟蛋白泡沫液_河南新乡骏华消防科技厂家 | 旋振筛_不锈钢旋振筛_气旋筛_旋振筛厂家—新乡市大汉振动机械有限公司 | 安徽泰科检测科技有限公司【官方网站】 | 网站建设,北京网站建设,北京网站建设公司,网站系统开发,北京网站制作公司,响应式网站,做网站公司,海淀做网站,朝阳做网站,昌平做网站,建站公司 | 臭氧灭菌箱-油桶加热箱-原料桶加热融化烘箱-南京腾阳干燥设备厂 臭氧发生器_臭氧消毒机 - 【同林品牌 实力厂家】 | 密集架-密集柜厂家-智能档案密集架-自动选层柜订做-河北风顺金属制品有限公司 | 冷油器,取样冷却器,热力除氧器-连云港振辉机械设备有限公司 | 贵州科比特-防雷公司厂家提供贵州防雷工程,防雷检测,防雷接地,防雷设备价格,防雷产品报价服务-贵州防雷检测公司 | 众品地板网-地板品牌招商_地板装修设计_地板门户的首选网络媒体。 | Magnescale探规,Magnescale磁栅尺,Magnescale传感器,Magnescale测厚仪,Mitutoyo光栅尺,笔式位移传感器-苏州连达精密量仪有限公司 | 户外健身路径_小区健身器材_室外健身器材厂家_价格-浩然体育 | 卫生纸复卷机|抽纸机|卫生纸加工设备|做卫生纸机器|小型卫生纸加工需要什么设备|卫生纸机器设备多少钱一台|许昌恒源纸品机械有限公司 | 屏蔽服(500kv-超高压-特高压-电磁)-徐吉电气 | 长沙中央空调维修,中央空调清洗维保,空气能热水工程,价格,公司就找维小保-湖南维小保环保科技有限公司 | 连续油炸机,全自动油炸机,花生米油炸机-烟台茂源食品机械制造有限公司 | 不锈钢酒柜|恒温酒柜|酒柜定制|酒窖定制-上海啸瑞实业有限公司 | 基本型顶空进样器-全自动热脱附解吸仪价格-AutoHS全模式-成都科林分析技术有限公司 | 诺冠气动元件,诺冠电磁阀,海隆防爆阀,norgren气缸-山东锦隆自动化科技有限公司 | 博博会2021_中国博物馆及相关产品与技术博览会【博博会】 | 无缝钢管-聊城无缝钢管-小口径无缝钢管-大口径无缝钢管 - 聊城宽达钢管有限公司 | EFM 022静电场测试仪-套帽式风量计-静电平板监测器-上海民仪电子有限公司 | 消电检公司,消电检价格,北京消电检报告-北京设施检测公司-亿杰(北京)消防工程有限公司 | 单级/双级旋片式真空泵厂家,2xz旋片真空泵-浙江台州求精真空泵有限公司 | 304不锈钢无缝管_不锈钢管厂家 - 隆达钢业集团有限公司 | 船用泵,船用离心泵,船用喷射泵,泰州隆华船舶设备有限公司 | 金现代信息产业股份有限公司--数字化解决方案供应商 |