微信小程序函数防抖和函数节流

已于 2024-04-08 15:47:35 修改 · 298 阅读

文章标签：

#微信小程序 #小程序 #javascript

于 2024-04-07 16:50:49 首次发布

学习记录专栏收录该内容

1 篇文章

订阅专栏

本文介绍了JavaScript中的函数防抖和节流技术，分别用于延迟输入框内容显示和限制事件触发频率，以提高用户体验。通过实例展示了如何在Vue中使用这两个功能。

`函数防抖`：延迟函数执行，多用于input框输入时，显示匹配的输入内容的情况、窗口调整、按钮点击。

`函数节流`：单位时间n秒内，第一次触发函数执行之后不管触发多少次都不执行。到下一个单位时间n秒时第一次触发函数执行，多用于页面scroll滚动、鼠标移动、实时通信。

函数节流是减少函数的触发频率；函数防抖是延迟函数执行，且不管触发多少次都只执行最后一次

//common.js

/*函数节流*/
function throttle(fn, interval) {
  var enterTime = 0; //触发的时间
  var gapTime = interval || 300; //间隔时间，如果interval不传值，默认为300ms
  return 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; //间隔时间 不传值默认为1000ms
  return 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);
  }
})