這篇文章主要講解了“JS怎么防抖和節(jié)流”,文中的講解內(nèi)容簡單清晰,易于學(xué)習(xí)與理解,下面請大家跟著小編的思路慢慢深入,一起來研究和學(xué)習(xí)“JS怎么防抖和節(jié)流”吧!
創(chuàng)新互聯(lián)建站-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價(jià)比曾都網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式曾都網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們,業(yè)務(wù)覆蓋曾都地區(qū)。費(fèi)用合理售后完善,10多年實(shí)體公司更值得信賴。函數(shù)防抖
當(dāng)持續(xù)觸發(fā)事件時(shí),一定時(shí)間段內(nèi)沒有再觸發(fā)事件,事件處理函數(shù)才會(huì)執(zhí)行一次,如果設(shè)定時(shí)間到來之前,又觸發(fā)了事件,就重新開始延時(shí)。也就是說當(dāng)一個(gè)用戶一直觸發(fā)這個(gè)函數(shù),且每次觸發(fā)函數(shù)的間隔小于既定時(shí)間,那么防抖的情況下只會(huì)執(zhí)行一次。
function debounce(fn, wait) { var timeout = null; //定義一個(gè)定時(shí)器 return function() { if(timeout !== null) clearTimeout(timeout); //清除這個(gè)定時(shí)器 timeout = setTimeout(fn, wait); } } // 處理函數(shù) function handle() { console.log(Math.random()); } // 滾動(dòng)事件 window.addEventListener('scroll', debounce(handle, 1000));
如上所見,當(dāng)持續(xù)觸發(fā)scroll函數(shù),handle函數(shù)只會(huì)在1秒時(shí)間內(nèi)執(zhí)行一次,在滾動(dòng)過程中并沒有持續(xù)執(zhí)行,有效減少了性能的損耗
函數(shù)節(jié)流
當(dāng)持續(xù)觸發(fā)事件時(shí),保證在一定時(shí)間內(nèi)只調(diào)用一次事件處理函數(shù),意思就是說,假設(shè)一個(gè)用戶一直觸發(fā)這個(gè)函數(shù),且每次觸發(fā)小于既定值,函數(shù)節(jié)流會(huì)每隔這個(gè)時(shí)間調(diào)用一次
用一句話總結(jié)防抖和節(jié)流的區(qū)別:防抖是將多次執(zhí)行變?yōu)樽詈笠淮螆?zhí)行,節(jié)流是將多次執(zhí)行變?yōu)槊扛粢欢螘r(shí)間執(zhí)行
實(shí)現(xiàn)函數(shù)節(jié)流我們主要有兩種方法:時(shí)間戳和定時(shí)器
例如
var throttle = function(func, delay) { var prev = Date.now(); return function() { var context = this; //this指向window var args = arguments; var now = Date.now(); if (now - prev >= delay) { func.apply(context, args); prev = Date.now(); } } } function handle() { console.log(Math.random()); } window.addEventListener('scroll', throttle(handle, 1000));
這個(gè)節(jié)流函數(shù)利用時(shí)間戳讓第一次滾動(dòng)事件執(zhí)行一次回調(diào)函數(shù),此后每隔1000ms執(zhí)行一次,在小于1000ms這段時(shí)間內(nèi)的滾動(dòng)是不執(zhí)行的
再舉一個(gè)定時(shí)器的例子:
var throttle = function(func, delay) { var timer = null; return function() { var context = this; var args = arguments; if (!timer) { timer = setTimeout(function() { func.apply(context, args); timer = null; }, delay); } } } function handle() { console.log(Math.random()); } window.addEventListener('scroll', throttle(handle, 1000));
當(dāng)觸發(fā)事件的時(shí)候,我們設(shè)置了一個(gè)定時(shí)器,在沒到1000ms之前這個(gè)定時(shí)器為null,而到了規(guī)定時(shí)間執(zhí)行這個(gè)函數(shù)并再次把定時(shí)器清除。也就是說當(dāng)?shù)谝淮斡|發(fā)事件,到達(dá)規(guī)定時(shí)間再執(zhí)行這個(gè)函數(shù),執(zhí)行之后馬上清除定時(shí)器,開始新的循環(huán),那么我們看到的效果就是,滾動(dòng)之后沒有馬上打印,而是等待1000ms打印,有一個(gè)延遲的效果,并且這段時(shí)間滾動(dòng)事件不會(huì)執(zhí)行函數(shù)。
單用時(shí)間戳或者定時(shí)器都有缺陷,我們更希望第一次觸發(fā)馬上執(zhí)行函數(shù),最后一次觸發(fā)也可以執(zhí)行一次事件處理函數(shù)
var throttle = function(func, delay) { var timer = null; var startTime = Date.now(); //設(shè)置開始時(shí)間 return function() { var curTime = Date.now(); var remaining = delay - (curTime - startTime); //剩余時(shí)間 var context = this; var args = arguments; clearTimeout(timer); if (remaining <= 0) { // 第一次觸發(fā)立即執(zhí)行 func.apply(context, args); startTime = Date.now(); } else { timer = setTimeout(func, remaining); //取消當(dāng)前計(jì)數(shù)器并計(jì)算新的remaining } } } function handle() { console.log(Math.random()); } window.addEventListener('scroll', throttle(handle, 1000));
在節(jié)流函數(shù)內(nèi)部使用開始時(shí)間startTime、當(dāng)前時(shí)間curTime和剩余時(shí)間remaining,當(dāng)剩余時(shí)間小于等于0意味著執(zhí)行處理函數(shù),這樣保證第一次就能立即執(zhí)行函數(shù)并且每隔delay時(shí)間執(zhí)行一次;如果還沒到時(shí)間,就會(huì)在remaining之后觸發(fā),保證最后一次觸發(fā)事件也能執(zhí)行函數(shù),如果在remaining時(shí)間內(nèi)又觸發(fā)了滾動(dòng)事件,那么會(huì)取消當(dāng)前的計(jì)數(shù)器并計(jì)算出新的remaing時(shí)間。通過時(shí)間戳和定時(shí)器的方法,我們實(shí)現(xiàn)了第一次立即執(zhí)行,最后一次也執(zhí)行,規(guī)定時(shí)間間隔執(zhí)行的效果,可以靈活運(yùn)用在開發(fā)中
PS:防抖和節(jié)流能有效減少瀏覽器引擎的損耗,防止出現(xiàn)頁面堵塞卡頓現(xiàn)象,應(yīng)該熟練掌握。最后再次感謝原作者的總結(jié),熱心分享技術(shù)讓我們的生活變得更好
感謝各位的閱讀,以上就是“JS怎么防抖和節(jié)流”的內(nèi)容了,經(jīng)過本文的學(xué)習(xí)后,相信大家對JS怎么防抖和節(jié)流這一問題有了更深刻的體會(huì),具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是創(chuàng)新互聯(lián),小編將為大家推送更多相關(guān)知識點(diǎn)的文章,歡迎關(guān)注!
網(wǎng)站欄目:JS怎么防抖和節(jié)流-創(chuàng)新互聯(lián)
本文來源:http://muchs.cn/article24/psece.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供企業(yè)網(wǎng)站制作、定制開發(fā)、品牌網(wǎng)站設(shè)計(jì)、虛擬主機(jī)、外貿(mào)網(wǎng)站建設(shè)、營銷型網(wǎng)站建設(shè)
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容