小編給大家分享一下javascript函數(shù)節(jié)流和防抖的應(yīng)用場景有哪些,希望大家閱讀完這篇文章之后都有所收獲,下面讓我們一起去探討吧!
專注于為中小企業(yè)提供成都做網(wǎng)站、網(wǎng)站制作服務(wù),電腦端+手機端+微信端的三站合一,更高效的管理,為中小企業(yè)黃龍免費做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都,凝聚了一批互聯(lián)網(wǎng)行業(yè)人才,有力地推動了近1000家企業(yè)的穩(wěn)健成長,幫助中小企業(yè)通過網(wǎng)站建設(shè)實現(xiàn)規(guī)模擴充和轉(zhuǎn)變。throttle 節(jié)流
事件觸發(fā)到結(jié)束后只執(zhí)行一次。
應(yīng)用場景
觸發(fā)mousemove事件的時候, 如鼠標移動。
觸發(fā)keyup事件的情況, 如搜索。
觸發(fā)scroll事件的時候, 譬如鼠標向下滾動停止時觸發(fā)加載數(shù)據(jù)。
coding
方法1 防抖
// function resizehandler(fn, delay){ // clearTimeout(fn.timer); // fn.timer = setTimeout(() => { // fn(); // }, delay); // } // window.onresize = () => resizehandler(fn, 1000);
方法2 閉包 防抖
function resizehandler(fn, delay){ let timer = null; return function() { const context = this; const args=arguments; clearTimeout(timer); timer = setTimeout(() => { fn.apply(context,args); }, delay); } } window.onresize = resizehandler(fn, 1000);
debounce 防抖
事件出發(fā)后一定的事件內(nèi)執(zhí)行一次。
應(yīng)用場景
window 變化觸發(fā)resize事件是, 只執(zhí)行一次。
電話號碼輸入的驗證, 只需停止輸入后進行一次。
coding
function resizehandler(fn, delay, duration) { let timer = null; let beginTime = +new Date(); return function() { const context = this; const args = arguments; const currentTime = +new Date(); timer && clearTimeout(timer); if ((currentTime - beginTime) >= duration) { fn.call(context, args); beginTime = currentTime; } else { timer = setTimeout(() => { fn.call(context, args) }, delay); } } } window.onresize = resizehandler(fn, 1000, 1000);
看完了這篇文章,相信你對“javascript函數(shù)節(jié)流和防抖的應(yīng)用場景有哪些”有了一定的了解,如果想了解更多相關(guān)知識,歡迎關(guān)注創(chuàng)新互聯(lián)網(wǎng)站制作公司行業(yè)資訊頻道,感謝各位的閱讀!
文章題目:javascript函數(shù)節(jié)流和防抖的應(yīng)用場景有哪些-創(chuàng)新互聯(lián)
文章地址:http://jinyejixie.com/article44/dijphe.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站制作、軟件開發(fā)、移動網(wǎng)站建設(shè)、網(wǎng)站設(shè)計、網(wǎng)站內(nèi)鏈、面包屑導(dǎo)航
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容