原理
觸發事件後在 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>
2. vue中使用
建立乙個 common.js 檔案
export
default
timer =
settimeout((
)=>
, delay)}}
}
在 vue 檔案中引入並使用
import
from
'./common'
export
default)}
}
原理應用場景
1. 定時器版
// 定時器版
var canrun =
true
document.
onscroll
=function()
canrun =
false
settimeout
(function()
,300)}
<
/script>
2. 時間戳版
// 時間戳版
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事件,然後再函式體中寫入判斷是否滾動到底部的邏輯 這樣做的乙個缺點就是比較消耗效能,因為當在滾動的時候,瀏覽器會無時不刻地在計算判斷是否滾動到底部的邏輯,而在實際的場景中是不需要這麼做的,在實際場景中可能是這樣的 在滾...