前端节流,防抖 2022-06-14 sxm

src/main.js

@@ -17,6 +17,7 @@ import './directives'
 import decimalUtil from '@/utils/decimalUtil.js'
 import getLodop from '@/utils/LodopFuncs.js'
 import pdf from 'vue-pdf'
+import { debounce,throttle} from '@/utils/common.js'
 
 Vue.component('downloadExcel', JsonExcel)
 Vue.component('pdf', pdf)
@@ -34,6 +35,8 @@ Vue.prototype.isAuth = isAuth     // 权限方法
 Vue.prototype.getLodop = getLodop     // 打印
 Vue.prototype.decimalUtil = decimalUtil    // 计算
 Vue.prototype.dayjs = dayjs  //时间格式化插件 2021-11-02
+Vue.prototype.debounce = debounce  // 防抖
+Vue.prototype.throttle = throttle  // 限流
 
 // 保存整站vuex本地储存初始状态
 window.SITE_CONFIG['storeState'] = cloneDeep(store.state)

src/utils/common.js

@@ -0,0 +1,34 @@
+// 防抖
+export function debounce(fn,wait = 3000 ){
+  let  timer = null;
+  return function () {
+    console.log('开始抖')
+    console.log(wait)
+    let args = arguments;
+    let that =  this;
+    if (timer){
+      clearTimeout(timer)
+    }
+    console.log('开始防抖')
+    timer = setTimeout(function () {
+      timer = null;
+      console.log('开始防抖')
+      fn.apply(that,args)
+    },wait)
+  }
+}
+
+// 节流
+export function throttle(fn,wait = 3000 ){
+  let  timer = null;
+  return function () {
+    if (timer !=null  ) return;
+    let args = arguments;
+    let that =  this;
+    clearTimeout(timer)
+    fn.apply(that,args)
+    timer = setTimeout(function () {
+      timer = null;
+    },wait)
+  }
+}

src/views/modules/sys/user.vue

@@ -187,6 +187,7 @@ import {
   saveUserSpecialSecurity,
   updateUserSpecialSecurity
 } from '@/api/factory/userSpecialSecurity.js'
+import {debounce, throttle} from "../../../utils/common";
 
 
 export default {
@@ -443,7 +444,7 @@ export default {
       })
     },
     // 获取数据列表
-    getDataList() {
+    getDataList :throttle( function () {
       this.dataListLoading = true
       this.$http({
         url: this.$http.adornUrl('/sys/user/list'),
@@ -463,7 +464,7 @@ export default {
         }
         this.dataListLoading = false
       })
-    },
+    },1000),
     // 每页数
     sizeChangeHandle(val) {
       this.pageSize = val