如果在时间运行时收到数据，如何重置 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
        }