函數防抖：延遲函數執行，多用于input框輸入時，顯示匹配的輸入內容的情況

函數節流：單位時間n秒內，第一次觸發函數執行 之后不管觸發多少次都不執行。到下一個單位時間n秒時 第一次觸發函數執行，多用于頁面scroll滾動、窗口resize、防止按鈕重復點擊

函數節流是減少函數的觸發頻率；函數防抖是延遲函數執行，且不管觸發多少次都只執行最后一次

小程序中使用函數防抖、節流一般都將這兩種方法封裝在公用的js中

//common.js/*函數節流*/ function throttle(fn, interval) {var enterTime = 0; //觸發的時間var gapTime = interval || 300; //間隔時間，如果interval不傳值，默認為300msreturn function() {var that = this;var backTime = new Date(); //第一次函數return即觸發的時間if(backTime - enterTime > gapTime) {fn.call(that, arguments);enterTime = backTime; //賦值給第一次觸發的時間 保存第二次觸發時間}}; }/*函數防抖*/ function debounce(fn, interval) {var timer;var gapTime = interval || 1000; //間隔時間 不傳值默認為1000msreturn function() {clearTimeout(timer);var that = this;var args = arguments; //保存arguments setTimeout是全局的 arguments不是防抖函數需要的timer = setTimeout(function() {fn.call(that, args);}, gapTime);}; }/*導出*/ export default {throttle,debounce };

使用

import tool from '路徑'; Page({data: {a: 0},onPageScroll: tool.throttle(function(msg){this.setData({a: msg[0].scrollTop});}),goUnlock: tool.debounce(function() {this.saveUserInfo();}),saveUserInfo: function() {console.log(1);} })

我的博客即將同步至騰訊云開發者社區，邀請大家一同入駐：https://cloud.tencent.com/developer/support-plan?invite_code=3a49jydatjmss

總結

以上是生活随笔為你收集整理的微信小程序 函数防抖和函数节流的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。