vue 中使用防抖和节流

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_39759115/article/details/82287517

防抖和节流是我们在开发过程中常用优化性能的方式

那么在 vue 中怎么使用呢：

1. 在公共方法中（如 public.js 中），加入函数防抖和节流方法

   // 防抖
   export function _debounce(fn, delay) {
   
       var delay = delay || 200;
       var timer;
       return function () {
           var th = this;
           var args = arguments;
           if (timer) {
               clearTimeout(timer);
           }
           timer = setTimeout(function () {
               timer = null;
               fn.apply(th, args);
           }, delay);
       };
   }
   // 节流
   export function _throttle(fn, interval) {
       var last;
       var timer;
       var interval = interval || 200;
       return function () {
           var th = this;
           var args = arguments;
           var now = +new Date();
           if (last && now - last < interval) {
               clearTimeout(timer);
               timer = setTimeout(function () {
                   last = now;
                   fn.apply(th, args);
               }, interval);
           } else {
               last = now;
               fn.apply(th, args);
           }
       }
   }
   

2. 在需要使用的组件引用

   import { _debounce } from "@/utils/public";

3. 在 methods 中使用

     methods: {
       // 改变场数
       changefield: _debounce(function(_type, index, item) {
           // do something ...
       }, 200)
     }