如果在时间为 运行 时收到数据，如何重置 setTimeout？

Question

我在我的 VUE 应用程序中有一个文本类型的输入，我在其中收集数据，当我完成收集它时，我必须显示另一个组件。

                <input
                type="text"
                v-model="textFormInfo.text"
                @keypress="onChangeText($event)"
                />
                <div class="loader-spinner" v-if="loading">
                  <app-loader ref="spinner"/>
                </div>

这是我控制交互的方法。当他们开始输入输入时，我通过按键进行检测，当有 .length 时，我启动一个 settimeout 来给他们时间来输入和显示加载程序并加载下一个组件。

export default {
  data() {
    return {
      myTimeout: null
    };
  },



    onChangeName(event) {
      if (event.target._value.length > 0) {
        this.loading = true;
        this.myTimeout = setTimeout(() => (
          this.isNameCompleted = true, 
          this.loading = false,
          this.isLoaderFinished = true,
          this.$refs.scrolled_3.focus()), 2200);
      }
    }

问题是，如果您键入的速度慢或信息太长，则在您完成键入之前会显示下一个组件。 我试图确保每次收到按键事件时都会重置 settimeout，以便仅在我停止接收按键时应用总的 settimeout 值。

我尝试按照使用 clearTimeout 方法的示例进行操作，但我不知道在这种情况下如何实现它。 我怎样才能得到这个？任何想法。

问候并提前感谢您的时间和帮助

Answer 1

我认为你在这里试图实现的是去抖动，如果我是正确的，你可以像这样为每一次 kry 按下我们创建一个超时，如果键在特定时间内没有按下，settimeout 中的方法将是叫

var timeoutId = 0;
    function keypress() {
          if (timeoutId >= 0) {
            clearTimeout(timeoutId);
          }
          timeoutId = window.setTimeout(() => {
            callMethod();
          }, 500);// time to wait to listen for next keypress if not pressed callMethod will execute
        }