JS中使用函式防抖與函式節流

原理

觸發事件後在 n 秒內函式只能執行一次，如果在 n 秒內又觸發了事件，則會重新計算函式執行時間。簡單的說，當乙個動作連續觸發，則只執行最後一次

應用場景

1. 普通js中使用

"text" id=
"inp"
>
var timer =
null
var input = document.
getelementbyid
("inp"
) inp.
oninput
=function()
timer =
settimeout((
)=>
,300)}
function
ajax()
<
/script>
<
/body>

建立乙個 common.js 檔案

export

default
timer =
settimeout((
)=>
, delay)}}
}

import

from
'./common'
export
default)}
}

1. 定時器版

// 定時器版

var canrun =
true
document.
onscroll
=function()
canrun =
false
settimeout
(function()
,300)}
<
/script>

// 時間戳版

let starttime = date.
now(
)// 開始時間
let time =
500// 間隔時間
let timer
window.
onscroll
=function
throttle()
else,50
)}}<
/script>

不同點

JS函式節流 函式防抖

函式節流 throttle 函式節流 加入函式節流函式 使用方法 this.refs.throttle.addeventlistener scroll throttle that.console,300 函式防抖 debounce 很明顯，這樣的做法不好的是當使用者輸入第乙個字元的時候，就開始請求判...

函式防抖與函式節流

函式防抖 debounce 當呼叫動作過n毫秒後，才會執行該動作，若在這n毫秒內又呼叫此動作則將重新計算執行時間 函式節流 throttle 預先設定乙個執行週期，當呼叫動作的時刻大於等於執行週期則執行該動作，然後進入下乙個新週期 函式節流 throttle 與函式防抖 debounce 都是為了限...

函式節流與函式防抖

這裡以判斷頁面是否滾動到底部為例，普通的做法就是監聽window物件的scroll事件，然後再函式體中寫入判斷是否滾動到底部的邏輯 這樣做的乙個缺點就是比較消耗效能，因為當在滾動的時候，瀏覽器會無時不刻地在計算判斷是否滾動到底部的邏輯，而在實際的場景中是不需要這麼做的，在實際場景中可能是這樣的 在滾...