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

2021-09-19 11:37:59 字數 1418 閱讀 9426

原理

觸發事件後在 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事件,然後再函式體中寫入判斷是否滾動到底部的邏輯 這樣做的乙個缺點就是比較消耗效能,因為當在滾動的時候,瀏覽器會無時不刻地在計算判斷是否滾動到底部的邏輯,而在實際的場景中是不需要這麼做的,在實際場景中可能是這樣的 在滾...