[TIL] Day-20

6222 ワード
CustomEvent ClearTimeout setTimeout テキストリンク
授業と実習の中で、新しい知り合いのことを書きたいです.

Web APIを使用した遅延イベント


let timer = null;

onEditing: (post) => {
      if (timer !== null) {
        clearTimeout(timer);
      }
      timer = setTimeout(async () => {
        setItem(postLocalSaveKey, 
          ...post,
          tempSaveDate: new Date(),
          });
        }
      }, 2000);
    },
  • イベントが発生するたびに、結果値をパラメータとしてonEditing関数が実行されます.
  • は、onEditing関数を実行した後の2000 msの後にローカルに格納される.
  • 500 msより前にイベントが発生し、関数が再実行された場合
    cleartimeoutを使用して、前に登録したsettimeoutをキャンセルします.
  • 500 msまでに関数が再実行されていない場合、登録された
    settimeout関数が実行されます.

    • Custom Eventの作成


    ルート構成部品にCustomイベントリスナーを追加すると、サブ構成部品にCustomイベントが発生しても、親と子の間の状態を継承し続けることなく、ルート構成部品から直接処理できます.
    作成
    window.dispatchEvent(
    new CustomEvent("route-change", {
      // detail객체는 e객체의 프로퍼티가 된다
      detail: {
        nextUrl: `/posts/${id}`, 
      },
    })
  );
    カスタムイベントに関する情報を識別するdetailというPropertyを追加します.
    アクティビティに情報を渡すことができます.
    最初のパラメータとして作成するイベントの名前をメモします.
    2番目のパラメータは、イベントオブジェクトに挿入するプロパティを設定します.
    使用するには、イベントオブジェクトを作成して励起する必要があります.
    したがって、生成されたイベントオブジェクトはDispatchEvent関数のパラメータとして実行される.
    ここではウィンドウで発生します.
    使用
    window.addEventListener("route-change", (e) => {
    const { nextUrl } = e.detail;
    if (nextUrl) {
      history.pushState(null, null, nextUrl);
      onRoute();
    }
  });
    生成されたカスタムイベントを登録し、イベント発生時にイベントオブジェクトの詳細オブジェクトの値を使用してコードを実行します.
    ウィンドウ内でイベントが励起されたためにウィンドウ内で励起されたイベントを読み取り、処理します.
    リファレンス
    CentOSはyumを使用してphp性能テストツールxhprofをインストールする
    [C]白駿1644小数の連合