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

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

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

瀏覽:125日期: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
相關文章:
主站蜘蛛池模板: 成都珞石机械 - 模温机、油温机、油加热器生产厂家 | 【MBA备考网】-2024年工商管理硕士MBA院校/报考条件/培训/考试科目/提前面试/考试/学费-MBA备考网 | 安徽泰科检测科技有限公司【官方网站】 | 乙炔气体报警装置|固定式氯化氢检测仪|河南驰诚电气百科 | 滚珠丝杆升降机_螺旋升降机_丝杠升降机-德迈传动 | 仓储笼_金属箱租赁_循环包装_铁网箱_蝴蝶笼租赁_酷龙仓储笼租赁 测试治具|过炉治具|过锡炉治具|工装夹具|测试夹具|允睿自动化设备 | 展厅装修公司|企业展厅设计|展厅制作|展厅搭建—广州展厅装饰公司 | 防水套管厂家_刚性防水套管_柔性防水套管_不锈钢防水套管-郑州中泰管道 | 外贸资讯网 - 洞悉全球贸易,把握市场先机 | 山东成考网-山东成人高考网| 防爆电机_ybx3系列电机_河南省南洋防爆电机有限公司 | 袋式过滤器,自清洗过滤器,保安过滤器,篮式过滤器,气体过滤器,全自动过滤器,反冲洗过滤器,管道过滤器,无锡驰业环保科技有限公司 | ISO9001认证咨询_iso9001企业认证代理机构_14001|18001|16949|50430认证-艾世欧认证网 | 手机游戏_热门软件app下载_好玩的安卓游戏下载基地-吾爱下载站 | 厦门网站建设_厦门网站设计_小程序开发_网站制作公司【麦格科技】 | Boden齿轮油泵-ketai齿轮泵-yuken油研-无锡新立液压有限公司 | 建大仁科-温湿度变送器|温湿度传感器|温湿度记录仪_厂家_价格-山东仁科 | ?水马注水围挡_塑料注水围挡_防撞桶-常州瑞轩水马注水围挡有限公司 | 青岛美佳乐清洁工程有限公司|青岛油烟管道清洗|酒店|企事业单位|学校工厂厨房|青岛油烟管道清洗 插针变压器-家用电器变压器-工业空调变压器-CD型电抗器-余姚市中驰电器有限公司 | 济南品牌设计-济南品牌策划-即合品牌策划设计-山东即合官网 | 直读光谱仪,光谱分析仪,手持式光谱仪,碳硫分析仪,创想仪器官网 | 网带通过式抛丸机,,网带式打砂机,吊钩式,抛丸机,中山抛丸机生产厂家,江门抛丸机,佛山吊钩式,东莞抛丸机,中山市泰达自动化设备有限公司 | 二手光谱仪维修-德国OBLF光谱仪|进口斯派克光谱仪-热电ARL光谱仪-意大利GNR光谱仪-永晖检测 | 电动卫生级调节阀,电动防爆球阀,电动软密封蝶阀,气动高压球阀,气动对夹蝶阀,气动V型调节球阀-上海川沪阀门有限公司 | 上海小程序开发-上海小程序制作公司-上海网站建设-公众号开发运营-软件外包公司-咏熠科技 | 北京中创汇安科贸有限公司| 阿里巴巴诚信通温州、台州、宁波、嘉兴授权渠道商-浙江联欣科技提供阿里会员办理 | 滚塑PE壳体-PE塑料浮球-警示PE浮筒-宁波君益塑业有限公司 | 等离子表面处理机-等离子表面活化机-真空等离子清洗机-深圳市东信高科自动化设备有限公司 | 聚天冬氨酸,亚氨基二琥珀酸四钠,PASP,IDS - 远联化工 | 【北京写字楼出租_写字楼租赁_办公室出租网/出售】-远行地产官网 | 耐磨陶瓷管道_除渣器厂家-淄博浩瀚陶瓷科技有限公司 | 防爆暖风机_防爆电暖器_防爆电暖风机_防爆电热油汀_南阳市中通智能科技集团有限公司 | 北京遮阳网-防尘盖土网-盖土草坪-迷彩网-防尘网生产厂家-京兴科技 | 杭州中策电线|中策电缆|中策电线|杭州中策电缆|杭州中策电缆永通集团有限公司 | 球磨机 选矿球磨机 棒磨机 浮选机 分级机 选矿设备厂家 | 硬齿面减速机_厂家-山东安吉富传动设备股份有限公司 | 热缩管切管机-超声波切带机-织带切带机-无纺布切布机-深圳市宸兴业科技有限公司 | 上海物流公司,上海货运公司,上海物流专线-优骐物流公司 | 云南成人高考网| 钢化玻璃膜|手机钢化膜|钢化膜厂家|手机保护膜-【东莞市大象电子科技有限公司】 |