TypeScript防抖節(jié)流函數(shù)示例詳解
防抖(Debounce):
防抖用于確保一個函數(shù)在指定時間內(nèi)只觸發(fā)一次。它在短時間內(nèi)屢次觸發(fā)同一個事件時,會勾銷之前的觸發(fā),直到最初一次觸發(fā)后的肯定工夫距離內(nèi)沒有新的觸發(fā)才執(zhí)行函數(shù)。
常見的利用場景包含:
- 輸入框?qū)崟r搜尋:當(dāng)用戶在輸入框中輸出時,能夠應(yīng)用防抖技術(shù)提早執(zhí)行搜尋查問,縮小不必要的查問和服務(wù)器壓力。
- 窗口大小調(diào)整:當(dāng)用戶調(diào)整瀏覽器窗口大小時,能夠應(yīng)用防抖技術(shù)防止在調(diào)整過程中頻繁地從新計算布局。
- 表單驗證:當(dāng)用戶在表單輸出時,能夠應(yīng)用防抖技術(shù)在用戶進(jìn)行輸出一段時間后再執(zhí)行驗證,縮小驗證的次數(shù)。
/**
* @description 防抖函數(shù)
* @param {Function} fn
* @param {number} delay
* @param {boolean} immediate
* @returns {Function}
*/
export function debounce<T extends (...args: any[]) => any>(
fn: T,
delay: number,
immediate: boolean = false
): T & { cancel(): void } {
let timerId: ReturnType<typeof setTimeout> | null = null; // 存儲定時器
// 定義一個cancel辦法,用于勾銷防抖
const cancel = (): void => {
if (timerId) {
clearTimeout(timerId);
timerId = null;
}
};
const debounced = function (
this: ThisParameterType<T>,
...args: Parameters<T>
): void {
const context = this;
if (timerId) {
cancel();
}
if (immediate) {
// 如果 immediate 為 true 并且沒有正在期待執(zhí)行的定時器,立刻執(zhí)行指標(biāo)函數(shù)
if (!timerId) {
fn.apply(context, args);
}
// 設(shè)置定時器,在延遲時間后將 timeoutId 設(shè)為 null
timerId = setTimeout(() => {
timerId = null;
}, delay);
} else {
// 設(shè)置定時器,在延遲時間后執(zhí)行指標(biāo)函數(shù)
timerId = setTimeout(() => {
fn.apply(context, args);
}, delay);
}
};
// 將 cancel 辦法附加到 debounced 函數(shù)上
(debounced as any).cancel = cancel;
return debounced as T & { cancel(): void };
}節(jié)流(Throttle):
節(jié)流用于確保一個函數(shù)在肯定工夫內(nèi)最多只觸發(fā)一次。它會在觸發(fā)事件期間以固定的工夫距離執(zhí)行函數(shù),而不論事件觸發(fā)得多頻繁。
常見的利用場景包含:
- 滾動事件監(jiān)聽:例如監(jiān)聽頁面滾動到底部加載更多數(shù)據(jù)時,能夠應(yīng)用節(jié)流技術(shù)縮小查看滾動地位的頻率,進(jìn)步性能。
- 鼠標(biāo)挪動事件:例如實現(xiàn)一個拖拽性能,能夠應(yīng)用節(jié)流技術(shù)縮小鼠標(biāo)挪動事件的解決頻率。
- 動畫成果:當(dāng)實現(xiàn)一個基于工夫的動畫成果時,能夠應(yīng)用節(jié)流技術(shù)限度動畫幀率,升高計算開銷。
總之,防抖和節(jié)流技術(shù)都能夠在不同場景下進(jìn)步利用性能。防抖實用于屢次觸發(fā)只需執(zhí)行一次的狀況,而節(jié)流實用于限度間斷觸發(fā)事件的執(zhí)行頻率。
/**
* 節(jié)流函數(shù)
* @param func 要進(jìn)行節(jié)流的指標(biāo)函數(shù)
* @param delay 節(jié)流的工夫距離(毫秒)
* @returns 返回一個通過節(jié)流解決的函數(shù)
*/
export function throttle<T extends (...args: any[]) => any>(
fn: T,
delay: number
): T {
let lastCall: number | null = null; // 上一次調(diào)用的工夫戳
return function (
this: ThisParameterType<T>,
...args: Parameters<T>
): ReturnType<T> | void {
const now = Date.now(); //以后工夫戳
// 如果之前沒有調(diào)用過,或者工夫距離超過了設(shè)定的值,執(zhí)行指標(biāo)函數(shù)
if (!lastCall || now - lastCall >= delay) {
lastCall = now;
return fn.apply(this, args);
}
} as T;
}以上就是TypeScript防抖節(jié)流實現(xiàn)示例詳解的詳細(xì)內(nèi)容,更多關(guān)于TypeScript防抖節(jié)流的資料請關(guān)注腳本之家其它相關(guān)文章!
- 使用?TypeScript?開發(fā)?React?函數(shù)式組件
- TypeScript?泛型重載函數(shù)的使用方式
- TypeScript函數(shù)和類型斷言實例詳解
- Typescript 實現(xiàn)函數(shù)重載的方式
- Typescript 函數(shù)重載的實現(xiàn)
- TypeScript中的函數(shù)
- Typescript中函數(shù)類型及示例詳解
- TypeScript使用函數(shù)重載確定返回類型的實現(xiàn)方法
- 如何在TypeScript中使用函數(shù)
- TypeScript中的函數(shù)重載示例分析
- TypeScript中使用回調(diào)函數(shù)的實現(xiàn)
相關(guān)文章
詳解什么是TypeScript里的Constructor?signature
這篇文章主要介紹了什么是TypeScript里的Constructor?signature詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-07-07
Typescript編碼規(guī)范ESLint和Prettier使用示例詳解
這篇文章主要介紹了Typescript編碼規(guī)范ESLint和Prettier使用示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-09-09
TypeScript與JavaScript的區(qū)別分析
TypeScript可以使用JavaScript中的所有代碼和編程概念,TypeScript是為了使JavaScript的開發(fā)變得更加容易而創(chuàng)建的。推薦先精通JS的的前提下再學(xué)習(xí)TS,這樣更有利于同時學(xué)習(xí)兩門語言。2022-12-12
TypeScript使用strictnullcheck實戰(zhàn)解析
這篇文章主要為大家介紹了TypeScript使用strictnullcheck實戰(zhàn)解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08
TypeScript數(shù)據(jù)結(jié)構(gòu)鏈表結(jié)構(gòu)?LinkedList教程及面試
這篇文章主要為大家介紹了TypeScript數(shù)據(jù)結(jié)構(gòu)鏈表結(jié)構(gòu)?LinkedList教程及面試,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-02-02
layui.layer彈出層(子頁面)改變父頁面內(nèi)容(訪問元素和函數(shù))
當(dāng)前頁面(父框架或父頁面)使用layer以iframe層的方式彈出新的窗口(子框架或子頁面)時,如何在子頁面中訪問父頁面的元素和函數(shù),從而改變父元素的頁面顯示,給用戶合理舒適的體驗。2023-02-02

