Advanced front-end performance optimization in the use of anti-shake and the throttle vue

Image stabilization and the throttle is used to optimize the performance of our development process in the way

So how to use it in the vue:

  1. In common methods (e.g.,  public.js in), was added and the throttle function stabilization methods
     

    // 防抖
    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);
            }
        }
    }

    3 in  methods use

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

 

Published 35 original articles · won praise 1 · views 10000 +

Guess you like

Origin blog.csdn.net/u010494101/article/details/105343318