时间戳

首页 > 解决方案 > 如何使 debounce 函数独立作用于 Vue.js 上同一组件的不同实例？

vue.js - 如何使 debounce 函数独立作用于 Vue.js 上同一组件的不同实例？

问题描述

我有两个 Vue 组件，在每次数据更改时都会调用“保存到磁盘”，它通过 mixin 加载到这些组件中，每个组件保存到不同的文件中，因此它们必须独立运行（仅触发去抖动重置它自己的数据变化）。防止过多写入磁盘。这是我的 debound 函数：

function debounce(fn, delay) {
  var timeoutID = null;
  return function () {
    console.log("clearing " + timeoutID)
    clearTimeout(timeoutID);
    var args = arguments;
    var that = this;
    timeoutID = setTimeout(() => fn.apply(that, args), delay);
  };
}

这是组件继承的 mixin 上的方法：

  methods: {
    saveData: debounce(function(){
        console.log('saving widget: ' + this.$parent.widget.id);
        this.saver.store = this.persisted;
    }, 5000),
  },

当我在一个或另一个组件上更改数据时效果很好，但是当我在一个或另一个组件上更改数据并且在去抖动结束之前我更改另一个时，它会从第一个组件中取消我的去抖动功能，并且只保存第二个组件数据.

我在这里想念什么？

标签： vue.jsmixinsdebounce

解决方案

这是因为每个组件实例共享相同的去抖函数，只有上下文 ( this, that) 不同。

一个简单的解决方法是将您的去抖动实现更改为


function debounce(fn, delay) {
  var thatUidToTimeoutID = {};
  return function () {
    var args = arguments;
    var that = this;
    clearTimeout(thatUidToTimeoutID[that._uid]);
    thatUidToTimeoutID[that._uid] = setTimeout(() => fn.apply(that, args), delay);
  };
}

_uid持有每个组件的唯一 id，它更像是一个内部属性（因此它是奇怪的键），但它应该足够好。

推荐阅读