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

引入和使用

import { _debounce } from "@/utils/public";
methods: {
    // 改变场数
    changefield: _debounce(function(_type, index, item) {
        // do something ...
    }, 200)
    //changefield(你自己方法的名字): _debounce(function(_type, index, item) {
        // do something ...
    //}, 200)  (几秒内重复点击不会多次执行方法设置的时间)
  }

 

posted @ 2020-09-21 09:19  郑正正  阅读(170)  评论(0编辑  收藏  举报
Live2D