[js]除去とドラッグ&ドロップ

今回のタスクでは,検索語を自動的に完了する機能があり,500 ms以内に新しい入力がなければアクティビティが発生しないことが要求される.
最初にsleep関数を作成し、500ミリ秒後にイベントハンドラを実行することを簡単に実現しました.

cosnt sleep = (ms) => {
    return new Promise(r => setTimeout(r, ms));
  }

sleep後に実行されたHandlerは、サーバにfetchを実行させて自動完了の単語リストの受信を要求するが、実施中に、最初に要求されたデータが後に要求されたデータよりも遅く到着することが分かった.

(gifに変換するのはちょっと遅い…)
この部分はscrum時間で共有したことがありますが、他の人が時間を計る方法を使っていたので、私もその方法を使いたかったのですが、以前ココアの時にポタポタ音とポタポタ音を聞いたことがあるので、もう一度探し直しました.

返品

連続呼び出しの関数では、最後に呼び出された関数(または最初の関数)のみが実行されます.
このタスクの例では、入力イベントが発生し、500 ms前に入力イベントが発生すると、以前のタイマがクリアされ、新しいイベントタイマが設定されます.つまり、タイマーの更新を続けます.

ドラッグネット

最後の関数を呼び出してからしばらくしてから再度呼び出さないでください.
簡単に言えば、500 msごとに1回しか活動しません.

適用

現在の場合、以前に発生したイベントはfetchリクエストではなく、より遅く発生したイベントを実行する機能が必要であるため、コールバックが必要であると考えられる.

  const debounce = (f, ms) => {
    let timer = null;

    return (...args) => {
      clearTimeout(timer);
      return new Promise(r => {
        timer = setTimeout(() => r(f(...args)), ms);
      });
    };
  }

確かに返品しましたが、イベント発生回数が減りました.最初は問題がこのように解決したと思っていた.しかし、問題は解決されなかった.ただ、事件の発生回数が減少するにつれて、私が感じたエラーの発生回数が減少した.実際,上に添付したgifは,バックダイヤルを適用した後の動作の様子である.
この問題は、次のネットワークリクエストのキャンセルで解決される.

JavaScript 24-クライアント開発者が理解すべきDeboring&Throttle

[javascript]ロック解除と遍歴

[Javascript]ロック解除とドラッグアンドドロップ