如何在面試中手寫出javascript節(jié)流和防抖函數(shù)
面試的時(shí)候我們經(jīng)常會(huì)問別人是理解什么是節(jié)流和防抖,嚴(yán)格的可能要求你寫出節(jié)流和防抖函數(shù),這里我們拋開loadsh工具庫手寫節(jié)流和防抖
1.節(jié)流函數(shù)throttle
// 節(jié)流方案1,每delay的時(shí)間執(zhí)行一次,通過開關(guān)控制 function throttle(fn, delay, ctx) { let isAvail = true return function () { let args = arguments // 開關(guān)打開時(shí),執(zhí)行任務(wù) if (isAvail) { fn.apply(ctx, args) isAvail = false // delay時(shí)間之后,任務(wù)開關(guān)打開 setTimeout(function () { isAvail = true }, delay) } } } // 節(jié)流方案2,通過計(jì)算開始和結(jié)束時(shí)間 function throttle(fn,delay){ // 記錄上一次函數(shù)出發(fā)的時(shí)間 var lastTime = 0 return function(){ // 記錄當(dāng)前函數(shù)觸發(fā)的時(shí)間 var nowTime = new Date().getTime() // 當(dāng)當(dāng)前時(shí)間減去上一次執(zhí)行時(shí)間大于這個(gè)指定間隔時(shí)間才讓他觸發(fā)這個(gè)函數(shù) if(nowTime - lastTime > delay){ // 綁定this指向 fn.call(this) //同步時(shí)間 lastTime = nowTime } } }
2.防抖debounceTail
2.1)只執(zhí)行首次
// 防抖 且首次執(zhí)行 // 采用原理:第一操作觸發(fā),連續(xù)操作時(shí),最后一次操作打開任務(wù)開關(guān)(并非執(zhí)行任務(wù)),任務(wù)將在下一次操作時(shí)觸發(fā)) function debounceStart(fn, delay, ctx) { let immediate = true let movement = null return function() { let args = arguments // 開關(guān)打開時(shí),執(zhí)行任務(wù) if (immediate) { fn.apply(ctx, args) immediate = false } // 清空上一次操作 clearTimeout(movement) // 任務(wù)開關(guān)打開 movement = setTimeout(function() { immediate = true }, delay) } }
2.2)只執(zhí)行最后一次
// 防抖 尾部執(zhí)行 // 采用原理:連續(xù)操作時(shí),上次設(shè)置的setTimeout被clear掉 function debounceTail(fn, delay, ctx) { let movement = null return function() { let args = arguments // 清空上一次操作 clearTimeout(movement) // delay時(shí)間之后,任務(wù)執(zhí)行 movement = setTimeout(function() { fn.apply(ctx, args) }, delay) } }
以上就是本文的全部內(nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Bootstrap滾動(dòng)監(jiān)聽(Scrollspy)插件詳解
滾動(dòng)監(jiān)聽插件是用來根據(jù)滾動(dòng)條所處在的位置自動(dòng)更新導(dǎo)航項(xiàng)目, 顯示導(dǎo)航項(xiàng)目高亮顯示。這篇文章主要介紹了Bootstrap滾動(dòng)監(jiān)聽(Scrollspy)插件的相關(guān)資料,需要的朋友可以參考下2016-04-04javascript中利用柯里化函數(shù)實(shí)現(xiàn)bind方法【推薦】
下面小編就為大家?guī)硪黄猨avascript中利用柯里化函數(shù)實(shí)現(xiàn)bind方法【推薦】。小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考,一起跟隨小編過來看看吧2016-04-04原生Js實(shí)現(xiàn)元素漸隱/漸現(xiàn)(原理為修改元素的css透明度)
大家經(jīng)常看到網(wǎng)頁里圖片漸變顯示,自己寫一個(gè)。原理很簡單就是修改元素的css透明度,具體實(shí)現(xiàn)代碼如下,感興趣的各位可以參考下哈,希望對(duì)大家有所幫助2013-06-06google廣告之另類js調(diào)用實(shí)現(xiàn)代碼
這篇文章主要介紹了google廣告之另類js調(diào)用實(shí)現(xiàn)代碼,需要的朋友可以參考下2020-08-08