如何在面試中手寫出javascript節(jié)流和防抖函數(shù)
面試的時候我們經(jīng)常會問別人是理解什么是節(jié)流和防抖,嚴(yán)格的可能要求你寫出節(jié)流和防抖函數(shù),這里我們拋開loadsh工具庫手寫節(jié)流和防抖
1.節(jié)流函數(shù)throttle
// 節(jié)流方案1,每delay的時間執(zhí)行一次,通過開關(guān)控制
function throttle(fn, delay, ctx) {
let isAvail = true
return function () {
let args = arguments // 開關(guān)打開時,執(zhí)行任務(wù)
if (isAvail) {
fn.apply(ctx, args)
isAvail = false // delay時間之后,任務(wù)開關(guān)打開
setTimeout(function () { isAvail = true }, delay)
}
}
}
// 節(jié)流方案2,通過計算開始和結(jié)束時間
function throttle(fn,delay){
// 記錄上一次函數(shù)出發(fā)的時間
var lastTime = 0
return function(){
// 記錄當(dāng)前函數(shù)觸發(fā)的時間
var nowTime = new Date().getTime()
// 當(dāng)當(dāng)前時間減去上一次執(zhí)行時間大于這個指定間隔時間才讓他觸發(fā)這個函數(shù)
if(nowTime - lastTime > delay){
// 綁定this指向
fn.call(this)
//同步時間
lastTime = nowTime
}
}
}
2.防抖debounceTail
2.1)只執(zhí)行首次
// 防抖 且首次執(zhí)行
// 采用原理:第一操作觸發(fā),連續(xù)操作時,最后一次操作打開任務(wù)開關(guān)(并非執(zhí)行任務(wù)),任務(wù)將在下一次操作時觸發(fā))
function debounceStart(fn, delay, ctx) {
let immediate = true
let movement = null
return function() {
let args = arguments
// 開關(guān)打開時,執(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è)置的setTimeout被clear掉
function debounceTail(fn, delay, ctx) {
let movement = null
return function() {
let args = arguments
// 清空上一次操作
clearTimeout(movement)
// delay時間之后,任務(wù)執(zhí)行
movement = setTimeout(function() {
fn.apply(ctx, args)
}, delay)
}
}
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript展開運(yùn)算符用法及實際應(yīng)用詳解
展開運(yùn)算符是JavaScript中的語法糖,用三個點(...)表示,廣泛應(yīng)用于數(shù)組和對象的操作,本文介紹了其基本用法,如在數(shù)組和對象中的應(yīng)用,合并數(shù)組或?qū)ο?更新對象屬性等,還探討了展開運(yùn)算符的高級應(yīng)用,需要的朋友可以參考下2024-09-09
一文詳解Javascript內(nèi)存機(jī)制與垃圾回收
這篇文章主要給大家詳細(xì)介紹了Javascript的內(nèi)存機(jī)制與垃圾回收,文中又詳細(xì)的代碼示例,對我們學(xué)習(xí)Javascript有一定的幫助,需要的同學(xué)可以借鑒閱讀2023-06-06
Bootstrap在線電子商務(wù)網(wǎng)站實戰(zhàn)項目5
這篇文章主要為大家分享了Bootstrap在線電子商務(wù)網(wǎng)站實戰(zhàn)項目,具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-10-10
利用Js的console對象,在控制臺打印調(diào)式信息測試Js的實現(xiàn)
下面小編就為大家?guī)硪黄肑s的console對象,在控制臺打印調(diào)式信息測試Js的實現(xiàn)。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-11-11
js實現(xiàn)的仿Photoshop鼠標(biāo)滾輪控制輸入框取值(修正兼容Chrome)
一直很想做這個效果,原理是監(jiān)聽鼠標(biāo)滾輪事件;可將此效果繼續(xù)發(fā)散到其他應(yīng)用上,如圖片縮放,頁面縮放等。2010-02-02

