資訊專欄INFORMATION COLUMN
摘要：函數(shù)的節(jié)流和函數(shù)的防抖都是優(yōu)化高頻率執(zhí)行的函數(shù)的一種方法。思路第一次調(diào)用的時候創(chuàng)建一個定時器，在指定的間隔時間之后運行代碼，當(dāng)?shù)诙握{(diào)用該函數(shù)時，清除前一次的定時器并另設(shè)置一個。
函數(shù)的節(jié)流和函數(shù)的防抖都是優(yōu)化高頻率執(zhí)行的函數(shù)的一種方法。我們知道瀏覽器中某些計算和處理要比其他昂貴很多。比如DOM的操作。當(dāng)一個操作dom的函數(shù)高頻率執(zhí)行時，我們可以根據(jù)情況進(jìn)行節(jié)流或防抖的處理。
節(jié)流函數(shù)在每個時間段里，最多只允許運行一次。比如說resize調(diào)整窗口，在調(diào)整窗口的過程中，事件一直在高頻率的觸發(fā)，我們可以利用節(jié)流函數(shù)讓其在一定的間隔時間段內(nèi)最多觸發(fā)一次。用一個形象的比喻吧。生產(chǎn)線上的啤酒瓶排成隊往前跑，一個行動遲緩的樹懶，每一段時間內(nèi)只能拿到一個瓶子。
思路：第一次調(diào)用的時候記錄一下時間戳，之后每次運行的時候都和上一次調(diào)用的時候的時間戳比較差值，當(dāng)差值大于等于某個值的時候才執(zhí)行。
function throttle (action, delay) {
let timeout = null
let lastRun = 0
return function () {
if (timeout) {
return
}
let elapsed = Date.now() - lastRun
let context = this
let args = arguments
let runCallback = function () {
lastRun = Date.now()
timeout = false
action.apply(context, args)
}
if (elapsed >= delay) {
runCallback()
} else {
timeout = setTimeout(runCallback, delay)
}
}
}
防抖函數(shù)
在高頻調(diào)用中，只有足夠的空閑時間，代碼才會執(zhí)行一次，常見的就是input的change事件，只有停頓輸入的事件大于指定的時間，代碼才會執(zhí)行一次。用一個形象的比喻吧。生活中的聲控?zé)簦灰悴煌５恼f話，燈就不會熄滅，只有你安靜的時間大于一定的值時，燈才會熄滅。
思路：第一次調(diào)用的時候創(chuàng)建一個定時器，在指定的間隔時間之后運行代碼，當(dāng)?shù)诙握{(diào)用該函數(shù)時，清除前一次的定時器并另設(shè)置一個。如果前一個定時器已經(jīng)執(zhí)行了，這個操作就沒任何意義，如果前一個定時器還沒執(zhí)行，其實就是將其替換為一個新的定時器。目的是只有在執(zhí)行函數(shù)的請求停止了一段時間之后才執(zhí)行。根據(jù)以上思路實現(xiàn)一個防抖函數(shù)。
function debounce(action, content, delay){
let timeoutId = null;
return function() {
clearTimeout(timeoutId);
timeoutId = setTimeout(function(){
action.apply(content);
}, delay);
}
}
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/94260.html
摘要：基礎(chǔ)防抖我們現(xiàn)在寫一個最基礎(chǔ)的防抖處理標(biāo)記事件也做如下改寫現(xiàn)在試一下，我們會發(fā)現(xiàn)只有我們停止?jié)L動秒鐘的時候，控制臺才會打印出一行隨機數(shù)。 為何要防抖和節(jié)流 有時候會在項目開發(fā)中頻繁地觸發(fā)一些事件,如 resize、 scroll、 keyup、 keydown等，或者諸如輸入框的實時搜索功能，我們知道如果事件處理函數(shù)無限制調(diào)用，會大大加重瀏覽器的工作量，有可能導(dǎo)致頁面卡頓影響體驗；后臺...
摘要：文章來源詳談防抖和節(jié)流輕松理解函數(shù)節(jié)流和函數(shù)防抖函數(shù)防抖和節(jié)流好啦，今天的小菊花課堂之的防抖與節(jié)流的內(nèi)容就告一段落啦，感各位能耐心看到這里。 前言 陸游有一首《冬夜讀書示子聿》——古人學(xué)問無遺力，少壯工夫老始成。紙上得來終覺淺，絕知此事要躬行。，其中的意思想必大家都能明白，在學(xué)習(xí)或工作中，不斷的印證著這首詩的內(nèi)涵。所以，又有了此篇小菊花文章。 詳解 在前端開發(fā)中，我們經(jīng)常會碰到一些會持...
摘要：文章來源詳談防抖和節(jié)流輕松理解函數(shù)節(jié)流和函數(shù)防抖函數(shù)防抖和節(jié)流好啦，今天的小菊花課堂之的防抖與節(jié)流的內(nèi)容就告一段落啦，感各位能耐心看到這里。 前言 陸游有一首《冬夜讀書示子聿》——古人學(xué)問無遺力，少壯工夫老始成。紙上得來終覺淺，絕知此事要躬行。，其中的意思想必大家都能明白，在學(xué)習(xí)或工作中，不斷的印證著這首詩的內(nèi)涵。所以，又有了此篇小菊花文章。 詳解 在前端開發(fā)中，我們經(jīng)常會碰到一些會持...
摘要：函數(shù)防抖和節(jié)流，都是控制事件觸發(fā)頻率的方法。封裝一個函數(shù)，讓持續(xù)觸發(fā)的事件監(jiān)聽是我們封裝的這個函數(shù)，將目標(biāo)函數(shù)作為回調(diào)傳進(jìn)去，等待一段時間過后執(zhí)行目標(biāo)函數(shù)第二點實現(xiàn)了，再看第一點持續(xù)觸發(fā)不執(zhí)行。 曾經(jīng)面試時候被問到過這個，年少的我一臉無知。。。 后來工作中遇到了一個場景：輸入名稱的同時去服務(wù)器校驗名稱是否重復(fù)，但發(fā)現(xiàn)之前的代碼竟然都沒做限制，輸入一次發(fā)一次請求。簡直忍不了，就在項目的u...
摘要：當(dāng)持續(xù)觸發(fā)事件的時候，函數(shù)是完全不執(zhí)行的，等最后一次觸發(fā)結(jié)束的一段時間之后，再去執(zhí)行原理第一次調(diào)用函數(shù)創(chuàng)建一個定時器，指定的時間間隔后運行代碼。第二次調(diào)用函數(shù)時，它會清除前一次的定時器并設(shè)置另一個。 目的：節(jié)約性能開銷，避免多次頻繁的觸發(fā)業(yè)務(wù)邏輯造成頁面卡頓。 應(yīng)用場景：節(jié)流和防抖的核心其實就是限制某一個方法被頻繁觸發(fā)，比如說DOM事件的監(jiān)聽回調(diào)，input的keyup、keydown...
閱讀 2710·2023-04-25 19:13
閱讀 4057·2021-09-22 15:34
閱讀 3067·2019-08-30 14:23
閱讀 1479·2019-08-29 17:17
閱讀 1619·2019-08-29 16:05
閱讀 1553·2019-08-29 13:26
閱讀 1228·2019-08-29 13:19
閱讀 568·2019-08-29 13:16
