美文网首页
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 中使用lodash对事件进行防抖和节流

    事件节流和防抖是提高性能或降低网络开销的好方法。虽然 Vue 1曾经支持对事件的节流和防抖,但是在Vue 2中为了...

  • 项目常用代码

    节流 } 防抖 } 页面滚动(requestAnimationFrame) vue全局点击防抖

  • JavaScript防抖和节流

    1. 认识防抖和节流 1.1. 对防抖和节流的认识 防抖和节流的概念其实最早并不是出现在软件工程中,防抖是出现在电...

  • swift 防抖与节流

    防抖 节流 使用

  • (转载) 函数防抖节流的理解及在Vue中的应用

    (转载) 函数防抖节流的理解及在Vue中的应用 防抖和节流的目的都是为了减少不必要的计算,不浪费资源,只在适合的时...

  • vue 中使用防抖和节流

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

  • 手写防抖和节流函数实现

    1. 认识防抖和节流函数 防抖和节流的概念其实最早并不是出现在软件工程中,防抖是出现在电子元件中,节流出现在流体流...

  • 实现防抖和节流

    一、认识防抖和节流函数 防抖和节流的概念其实最早并不是出现在软件工程中,防抖是出现在电子元件中,节流出现在流体流动...

  • vue中实现防抖和节流

    防抖函数的使用场景: 频繁触发、输入框搜索 节流函数的使用场景:频繁触发、onrize,onscroll滚动条

  • 防抖节流

    22. 防抖节流 防抖和节流的概念其实最早并不是出现在软件工程中,防抖是出现在电子元件中,节流出现在流体流动中 而...

网友评论

      本文标题:vue 中使用防抖和节流

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