小程序防抖的使用

小程序utlis新建文件tool.js

 

 2:加入以下代码：

/*函数节流*/
function throttle(fn, interval) {
    var enterTime = 0;//触发的时间
    var gapTime = interval || 300 ;//间隔时间，如果interval不传，则默认300ms
    return function() {
      var context = this;
      var backTime = new Date();//第一次函数return即触发的时间
      if (backTime - enterTime > gapTime) {
        fn.call(context,arguments);
        enterTime = backTime;//赋值给第一次触发的时间，这样就保存了第二次触发的时间
      }
    };
  }
  
  /*函数防抖*/
  function debounce(fn, interval) {
    var timer;
    var gapTime = interval || 1000;//间隔时间，如果interval不传，则默认1000ms
    return function() {
      clearTimeout(timer);
      var context = this;
      var args = arguments;//保存此处的arguments，因为setTimeout是全局的，arguments不是防抖函数需要的。
      timer = setTimeout(function() {
        fn.call(context,args);
      }, gapTime);
    };
  }
  
  export default {
    throttle,
    debounce
  };
  

3：js层面进行调用，要切记e[0],否者会一直报错

import tool from "../../utils/tool.js";

  formSubmit:tool.debounce(function(e){
    //   获取商品名称
    var title=e[0].detail.value.title;
    //  商品价格
    var price=e[0].detail.value.price;
    //  商品类型
    var type=e[0].detail.value.type;
    //  商品属性
    var info=e[0].detail.value.info;
    let that=this
    var priceTF = /^\d+(\.\d{1,2})?$/
    // 验证非空
    if (e[0].detail.value.title === "") {
      wx.showToast({
        title: '请输入商品名称',
        icon: "none",
        duration: 1000,
        mask: true,
      })
    } else if (e[0].detail.value.title.length > 60) {
      wx.showToast({
        title: '商品名称不得大于60字',
        icon: "none",
        duration: 1000,
        mask: true,
      })
    } else if (e[0].detail.value.title.length === "") {
      wx.showToast({
        title: '请输入商品价格',
        icon: "none",
        duration: 1000,
        mask: true,
      })
    } else if (!priceTF.test(e[0].detail.value.price)) {
      wx.showToast({
        title: '商品价格精确到两位',
        icon: "none",
        duration: 1000,
        mask: true,
      })
    } else if (e[0].detail.value.info === "") {
      wx.showToast({
        title: '请输入商品信息',
        icon: "none",
        duration: 1000,
        mask: true,
      })
    } else if (e[0].detail.value.point === "") {
      wx.showToast({
        title: '请输入商品卖点',
        icon: "none",
        duration: 1000,
        mask: true,
      })
    } 
    else if (that.data.typeInd === -1) {
      wx.showToast({
        title: '请选择商品类型',
        icon: "none",
        duration: 1000,
        mask: true,
      })
    } 
    else if (that.data.detail.length === 0) {
      wx.showToast({
        title: '请选择图片',
        icon: "none",
        duration: 1000,
        mask: true,
      })
    } 
    // 发送Ajax请求，进行入库
    wx.request({
      url: 'http://www.yan.com/api/xcx/getData',
      data: {
        title:title,
        price :price,
        type:type,
        info:info,
      },
      header: {
        'content-type': 'application/json' // 默认值
      },
      method:'POST',
      success (res) {
        //   提示发布成功
      if(res.data.code==200){
          wx.showToast({
            title: res.data.meg,
          })
          wx.switchTab({
        
            url: '/pages/good_index/good_index',
          })
      }
      }
    })
      }),

另一个方法：参考以下博客 

https://blog.csdn.net/daxianyu666/article/details/121139423?spm=1001.2014.3001.5502