vue 中使用防抖和节流

1.在公共方法中(如 public.js 中),加入函数防抖和节流方法

// 防抖

export default {

  _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);

    };

  },

  // 节流

  _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 { public } from "@/utils/public";

3.在 methods 中使用

methods: {

    changefield: public._debounce(function(_type, index, item) {

        // do something ...    }, 200)

  }

你可能感兴趣的:(vue 中使用防抖和节流)