微信小程式中用TS實現函式防抖

2022-06-16 08:30:10 字數 1002 閱讀 3789

前言:我的專案中有乙個需求需要用到函式防抖,但是發現小程式中防抖函式總是不生效,經過一番思考想到了下面的方法。

一,對於用js開發的小程式

1. 首先直接定義防抖函式

2. 然後關鍵的一步, 在生命週期鉤子裡初始化防抖函式

page(,

onload:

function

() ,

/** * 防抖函式

*/debounce(time)

timeout = settimeout(() =>, time);}},

/** * 被防抖函式

**/addnum() )

console.log(`延遲 1 秒執行** $`);

},})

效果:

二,對於用ts開發的小程式

ts寫的小程式實現函式防抖和js小程式略有不同,ts必須用 class 的方式實現, 下面我就用自己專案中的案例來展示

1. 建立防抖函式類

2. 在頁面生命週期裡初始化類

3. 在目標函式裡呼叫類的靜態方法--防抖函式

export class debounce 

public static search(detail) , 400);

}}

onload()

onsearch() ,
我這個需求是搜尋功能的防抖,經驗證也是可以的。

總結: 函式防抖的實現方法比較多,這裡的例子使用的是最簡單的,其他請各位自行搜尋吧。

防抖函式的理解(新手向,微信小程式適用)

防抖函式適用的是 有大量重複操作 的場景,比如列表渲染之後對每一項進行操作。函式 var timer debounce function func,wait 引數 func 需要防抖的函式 wait number型別,settimeout的時間引數 分析 命名乙個叫做debounce的函式,引數有兩...

微信小程式如何實現搜尋框的防抖功能

1 首先給輸入框繫結乙個bindinput事件,只要輸入框內的值改變就會觸發該函式 placeholder 請輸入您要搜尋的內容 bindinput handleinput input 2 定義乙個變數timeid,該值為定時器的返回值,作用是方便等會兒清除定時器。3 在handleinput函式中...

微信小程式 onLoad 函式

小程式註冊完成後,載入頁面,觸發onload方法。頁面載入後觸發onshow方法,顯示頁面。首次顯示頁面,會觸發onready方法,渲染頁面元素和樣式,乙個頁面只會呼叫一次。當小程式後台執行或跳轉到其他頁面時,觸發onhide方法。當小程式有後台進入到前台執行或重新進入頁面時,觸發onshow方法。...