函數(shù)防抖：延遲函數(shù)執(zhí)行，多用于input框輸入時(shí)，顯示匹配的輸入內(nèi)容的情況

函數(shù)節(jié)流：單位時(shí)間n秒內(nèi)，第一次觸發(fā)函數(shù)執(zhí)行 之后不管觸發(fā)多少次都不執(zhí)行。到下一個(gè)單位時(shí)間n秒時(shí) 第一次觸發(fā)函數(shù)執(zhí)行，多用于頁(yè)面scroll滾動(dòng)、窗口resize、防止按鈕重復(fù)點(diǎn)擊

函數(shù)節(jié)流是減少函數(shù)的觸發(fā)頻率；函數(shù)防抖是延遲函數(shù)執(zhí)行，且不管觸發(fā)多少次都只執(zhí)行最后一次

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

//common.js/*函數(shù)節(jié)流*/ function throttle(fn, interval) {var enterTime = 0; //觸發(fā)的時(shí)間var gapTime = interval || 300; //間隔時(shí)間，如果interval不傳值，默認(rèn)為300msreturn function() {var that = this;var backTime = new Date(); //第一次函數(shù)return即觸發(fā)的時(shí)間if(backTime - enterTime > gapTime) {fn.call(that, arguments);enterTime = backTime; //賦值給第一次觸發(fā)的時(shí)間 保存第二次觸發(fā)時(shí)間}}; }/*函數(shù)防抖*/ function debounce(fn, interval) {var timer;var gapTime = interval || 1000; //間隔時(shí)間 不傳值默認(rèn)為1000msreturn function() {clearTimeout(timer);var that = this;var args = arguments; //保存arguments setTimeout是全局的 arguments不是防抖函數(shù)需要的timer = setTimeout(function() {fn.call(that, args);}, gapTime);}; }/*導(dǎo)出*/ 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);} })

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

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。