当我快速输入时，它会呈现错误的 div

Question

我必须在我的输入中显示两个不同的下拉菜单。我通过一个 shouldShowWarningBox 方法来做到这一点，每次用户更新输入并更新 showWarningBox 的值时都会调用该方法。关键是，当我快速键入时，我会收到显示警告消息的错误消息，但事实并非如此。如果我打字慢，第一个 div 会被渲染。

我试过使用和不使用去抖动功能，但行为是一样的，只是有一点延迟。

有什么想法吗？

.html

<div v-if="!showWarningBox">
 //dropbox
</div>

<div v-if="showWarningBox">
 //warning message
</div>

.js

data () {
 return {
  showWarningBox: false,
 }
},
methods: {
 onInput (value) {
  this.debounce(this.shouldShowWarningBox(), 1000)
 },
 shouldShowWarningBox () {
  //conditional that changes showWarningBox
 },
 debounce (func, delay) {
  let id
 
  return (...args) => {
   if (id) clearTimeout(id)

   id = setTimeout(() => {
    func(...args)
   }, delay)
  }
 },
}

Answer 1

debounce returns 一个“去抖动”函数。您应该将该函数保存在组件属性中并在输入时调用该去抖动函数：

data(){
  let debouncedFn = this.debounce(this.shouldShowWarningBox, 1000)
  return {
    debouncedInput: debouncedFn
  }
},
methods: {
 onInput (value) {
  this.debouncedInput()
 },
 //...
}

当我快速输入时，它会呈现错误的 div

When I type to fast on input it renders the wrong div

javascript

input

vue.js

vuejs2

debounce