はじめと概要

問題は、エンタープライズコラボレーションのワークスペース作成フェーズで重複する名前を決定する方法から始まります.ワークスペースを生成するために,ユーザは大文字と小文字を区別しない重複単語を用いることができず,これを判断するために判断ステップを与えた.ユーザが一定の時間間隔で入力を停止した場合、上の例(Google Fonts)の検索フォーマットのように、このプロセスを入力値でデータを要求する形式に組織することを決定する.以上の内容は以下のように整理します.

要求

ユーザワークスペースの名前付けにおいて、重複するか否かを判断する機能を追加し、ユーザが入力を一時停止した後に行う.

プロセス

ユーザーに必要なワークスペース名

を入力します.

ワークスペース名が重複しているかどうかを判断

は、一定期間ユーザ入力がない場合に行う

であると判断する.

画面で

をレンダリングし、ユーザーが認識できるようにします.
そこで必要な部分を上の異なるフォントの部分にまとめ,この問題を解決するために,非同期要求を特定の条件下で実行することを目標として検討した.setTimeout()およびclearTimeout()を使用する方法が見出され、以下の結果が得られた.

結果

const handleTimeout = (name, value) => {
  if (typingTimeout) {
    clearTimeout(typingTimeout);
  }

  setWorkspaceData(prev => {
    return {
      ...prev,
      typingTimeout:
        value &&
        setTimeout(() => {
          fetch(`${API}?name=${value}`, {
            method: 'GET',
          })
            .then(res => res.json())
            .then(data => {
              setWorkspaceData(prev => ({
                ...prev,
                [name]: {
                  ...workspaceData[name],
                  val: value,
                  isCorrect: JSON.parse(data.message),
                },
              }));
            });
        }, 500),
    };
  });
};

const handleInput = ({ target }) => {
  const { name, value } = target;

  setWorkspaceData(prev => {
    return {
      ...prev,
      [name]: {
        ...workspaceData[name],
        val: value,
      },
    };
  });
  handleTimeout(name, value);
};

上記のコードでは、handleTimeout()関数は、0.5초内に入力されていない場合にfetch()関数を実行し、handleInput()関数は入力された文字列を保存し、handleTimeout()関数を実行する.handleTimeout()の関数をよく見ると、clearTimeout()およびsetTimeout()の方法を概ね使用することができる.原理を簡単に説明すると以下の通りです.

イベントが発生し、stateとして管理されているtypingTimeoutの中にtimeoutIDが存在する場合、IDの方法で削除される.このように削除すると、新しいclearTimeout()が生成され、setTimeout()にイベントが発生しない場合、0.5sは実行されないので、clearTimeout()関数でsetTimeout()関数が実行されます.これにより、以下の結果画面が導出される.

2つの入力ボックスでは、上のfetchの領域が、既存のワークスペース名について検証によって除外され、ボタンが無効になり、警告が表示されます.逆に、存在しない領域であれば、ボタンがアクティブになり、可能な文が表示されます.

の最後の部分

このコードを記述することにより、Give it a name!関数の戻り値が存在し、タイマを識別するためのsetTimeout()が返されることが分かった.これにより、timeoutIDを実行するオブジェクトを指定してもよいし、clearTimeout()の条件としてもよい.
また、上記の分野では、ifが2回繰り返されたため、setWorkspaceData()の割当分を繰り返さざるを得ず、valとvalのデータはフォームごとの関連性に対応しており、重複問題を解決するためにどのように分離するかが悩ましい問題である.この点を考慮して、再包装します.

🔖 ソース

stackoverflow : How to start search only when user stops typing?
MDN Web Docs : setTimeout()
MDN Web Docs : clearTimeout()