函式防抖和節流

2021-09-29 02:37:32 字數 1012 閱讀 4310

函式防抖和節流是用來幹什麼的?

1. 防抖

定義:指觸發事件後在n秒內函式只執行一次,如果在n秒內又觸發事件,則會重新計算函式執行時間

(計時清零)

防抖分為非立即執行版和立即執行版。

**如下:

function debounce(func, wait)

timer = settimeout(() => , wait)

}}

**如下:

function debounce(func,wait)

let callnow = !timer;

timer = settimeout(() => , wait)

if(callnow)

}}

// immediate 表示是否立即執行

function debounce(func,wait,immediate)

if(immediate) , wait);

if(callnow)

} else , wait)

} }}

2. 節流(throttle)

定義:節流是指連續觸發事件在n秒中只執行一次。

節流的兩種實現方式:

function throttle(func,wait)

}}

function throttle(func,wait), wait)

} }}

依然結合兩種方式整合函式節流,**如下:

// type=1時間戳版 type=2定時器版

function throttle(func,wait,type) else if(type === 2)

return function()

}else if(type === 2) ,wait)

}} }

}

防抖與節流方案 函式防抖和節流

在前端開發的過程中,我們經常會需要繫結一些持續觸發的事件,如 resize scroll mousemove 等等,但有些時候我們並不希望在事件持續觸發的過程中那麼頻繁地去執行函式。通常這種情況下我們怎麼去解決的呢?一般來講,防抖和節流是比較好的解決方案。讓我們先來看看在事件持續觸發的過程中頻繁執行...

函式防抖和節流

在前端開發的過程中,我們經常會需要繫結一些持續觸發的事件,如 resize scroll mousemove 等等,但有些時候我們並不希望在事件持續觸發的過程中那麼頻繁地去執行函式。通常這種情況下我們怎麼去解決的呢?一般來講,防抖和節流是比較好的解決方案。讓我們先來看看在事件持續觸發的過程中頻繁執行...

函式防抖和節流

在前端開發的過程中,我們經常會需要繫結一些持續觸發的事件,如 resize scroll mousemove 等等,但有些時候我們並不希望在事件持續觸發的過程中那麼頻繁地去執行函式。通常這種情況下我們怎麼去解決的呢?一般來講,防抖和節流是比較好的解決方案。讓我們先來看看在事件持續觸發的過程中頻繁執行...