节流和防抖
发布于 3 年前 作者 tliu 2370 次浏览 来自 分享

小程序防抖的使用


 

 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’,

          })

      }

      }

    })

      }),

回到顶部