Question

我输入了一些信息。

在模糊事件或输入时按我想做一些动作但是当我按下回车键时，我的输入会失去焦点，两个事件会一个接一个地被触发 - 我该怎么办？

<input  v-on:keyup.13.prevent ='save_renamed_group(g)'
                    @blur.prevent = 'save_renamed_group(g)'>

UPD：我不认为我的问题与此问题重复： Prevent both blur and keyup events to fire after pressing enter in a textbox

只是因为我想要一个清晰，干净，漂亮的解决方案来解决这个简单而常见的问题，并且那里发布的所有解决方案看起来都像是一点点地狱。

Answer 1

解决方案1 ：对方法应用 debounce 。

Debouncing主要将你的事件组合在一起并阻止他们   经常被解雇要在Vue组件中使用它，只需包装   你想在lodash的_.debounce函数中调用的函数。

https://alligator.io/vuejs/lodash-throttle-debounce/

import { debounce } from 'lodash';

export default {
  methods: {
    // group all function calls within 100ms together
    // no matter how many times this function is called within 100ms, only 1 of them will be executed.
    save_renamed_group: debounce(g => {
      // ...
    }, 100),
  },
};

优点：简单

缺点：延迟执行功能

解决方案2 ：将函数执行状态存储在变量

中

export default {
  created() {
    // create the variable
    this.save_renamed_group_running = false;
  },
  methods: {
    save_renamed_group(g) {
      // exit if function is already running
      if (this.save_renamed_group_running) return;

      // set running to true
      this.save_renamed_group_running = true;

      // .... other logic ...

      // set running to false before exiting
      this.save_renamed_group_running = false;
      return /* something */;
    },
  },
};

优点：立即执行功能

缺点：详细

Vue js停止第二次比赛

1 个答案: