美文网首页
vue 中使用防抖和节流

vue 中使用防抖和节流

作者: 君临12138 | 来源:发表于2018-11-14 15:28 被阅读0次

    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 中使用防抖和节流

          本文链接:https://www.haomeiwen.com/subject/lidjfqtx.html