购物车步进器增加防抖

pages/tabbar/cart/cartList.vue

@@ -180,6 +180,7 @@
 </template>
 <script>
 import * as API_Trade from "@/api/trade";
+import { debounce } from "@/utils/tools.js";
 export default {
   data() {
     return {
@@ -370,7 +371,8 @@ export default {
     /**
      * 点击步进器回调
      */
-    numChange(val, nums) {
+     numChange: debounce(function (val, nums) {   
+        // 需要防抖的内容
       // #ifdef MP-WEIXIN
       if (nums && nums == "1") {
         val.num++;
@@ -381,8 +383,7 @@ export default {
       }
       // #endif
       this.updateSkuNumFun(val.goodsSku.id, val.num);
-    },
+    }, 1000),
-
     /**
      * 去结算
      */

utils/tools.js

@@ -1,4 +1,3 @@
-
 /**
  * 解析url参数
  * @example ?id=12345&a=b
@@ -9,7 +8,7 @@ function urlParse(url) {
   let reg = /[?&][^?&]+=[^?&]+/g;
   let arr = url.match(reg);
   if (arr) {
-    arr.forEach((item) => {
+    arr.forEach(item => {
       let tempArr = item.substring(1).split("=");
       let key = decodeURIComponent(tempArr[0]);
       let val = decodeURIComponent(tempArr.splice(1).join("="));
@@ -21,28 +20,28 @@ function urlParse(url) {
 
 const getNetworkType = () => {
   uni.getNetworkType({
-    success: (res) => {
+    success: res => {
       if (res.networkType === "none") {
         uni.showToast({
           title: "网络好像有点问题,请检查后重试！",
           duration: 2000,
-          icon: "none",
+          icon: "none"
         });
         let pages = getCurrentPages();
         if (pages.length) {
           let route = pages[pages.length - 1].route;
           if (route !== "pages/empty/empty") {
             uni.navigateTo({
-              url: `/pages/empty/empty?type=wifi`,
+              url: `/pages/empty/empty?type=wifi`
             });
           }
         } else {
           uni.navigateTo({
-            url: `/pages/empty/empty?type=wifi`,
+            url: `/pages/empty/empty?type=wifi`
           });
         }
       }
-    },
+    }
   });
 };
 
@@ -64,8 +63,8 @@ const throttle = (fn, that, gapTime) => {
  * @param seconds
  * @returns {{day : *, hours : *, minutes : *, seconds : *}}
  */
-const countTimeDown = (seconds) => {
+const countTimeDown = seconds => {
-  const leftTime = (time) => {
+  const leftTime = time => {
     if (time < 10) time = "0" + time;
     return time + "";
   };
@@ -73,7 +72,7 @@ const countTimeDown = (seconds) => {
     day: leftTime(parseInt(seconds / 60 / 60 / 24, 10)),
     hours: leftTime(parseInt((seconds / 60 / 60) % 24, 10)),
     minutes: leftTime(parseInt((seconds / 60) % 60, 10)),
-    seconds: leftTime(parseInt(seconds % 60, 10)),
+    seconds: leftTime(parseInt(seconds % 60, 10))
   };
 };
 
@@ -94,10 +93,26 @@ const theNextDayTime = () => {
     ).getTime() - nowDate.getTime();
   return parseInt(time / 1000);
 };
-
+// 防抖
-export {
+const debounce = (fn, delay) => {
-  getNetworkType,
+  // 时间期限
-  throttle,
+  var delays = delay || 200;
-  countTimeDown,
+  var timer;
-  theNextDayTime,
+  // 闭包
+  return function() {
+    // 考虑作用域，上下文环境，apply需要用到this对象
+    var th = this;
+    // 接收的参数用 ES6 中的 rest 参数统一存储到变量 args 中。arguments就是传入的参数数组,而且个数可以不确定的传回给fn（不确定函数到底有多少个参数，用arguments来接收）
+    var args = arguments;
+    // 判断还在定时，说明当前正在一个计时过程中，并且又触发了相同事件。所以要取消当前的计时，重新开始计时
+    if (timer) {
+      clearTimeout(timer);
+    }
+    timer = setTimeout(function() {
+      timer = null;
+      // 执行方法
+      fn.apply(th, args);
+    }, delays);
   };
+};
+export { getNetworkType, throttle, countTimeDown, theNextDayTime, debounce };