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

2021-09-12 22:02:46 字數 688 閱讀 9930

防抖函式適用的是【有大量重複操作】的場景,比如列表渲染之後對每一項進行操作。

函式**:

var timer;

debounce: function (func, wait) ;

},

引數

func:需要防抖的函式;

wait:number型別,settimeout的時間引數;

**分析

命名乙個叫做debounce的函式,引數有兩個(func,wait),return乙個函式,內容為清除計時器,然後設定計時器,計時器的意思是:在wait時間後執行func。

清除計時器是整個函式的核心,因為防抖需要不停地清除計時器,最後在計時器結束後觸發func來達到效果。

example:

this.debounce(this.函式名,3000)()
在使用這個函式的時候我遇到了一些問題:
this.debounce(this.函式名.bind(this),3000)()
使用bind(this)把this指向傳到函式內部就解決了。

具體關於bind的內容可以參考mdn/bind()

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

前言 我的專案中有乙個需求需要用到函式防抖,但是發現小程式中防抖函式總是不生效,經過一番思考想到了下面的方法。一,對於用js開發的小程式 1.首先直接定義防抖函式 2.然後關鍵的一步,在生命週期鉤子裡初始化防抖函式 page onload function 防抖函式 debounce time ti...

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

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

微信小程式新手填坑

在正文之前,先叮囑一句。著手專案之前請務必把手冊過兩遍,不求記住多少乾貨,但求知道裡面都有什麼東西。最起碼的要求,要用到的元件和介面,至少要知道有這麼個東西。不然,別人再有耐心講得再詳細,你也不見得學的進一二。第二,彈性布局,小程式說白了屬於移動端頁面,也就是要做成響應式布局。所以強烈建議使用fle...