反応:Scrollシンチレーション現象を解決する

4771 ワード
randering-issue React テキストリンク
繰り返しスクロール中に点滅する現象
事件の原因
  • スクロール中にsettimeout()を繰り返し呼び出します.
  • 最初のsettimeout()が終了すると、スクロール呼び出しが大量に発生し、スクロールが点滅します.
    • 解決する
      const handleScrollEvent = e => {
    const rankingList: NodeListOf<Element> = document.querySelectorAll('.tab-item');

    for (const activeNode of rankingList as any) {
      if (activeNode.classList.contains('active')) {
        window.clearTimeout(timer);
        if (!activeNode.classList.contains('on')) {
          activeNode.children[0].classList.add('on');
          timer = window.setTimeout(() => {
            activeNode.children[0].classList.remove('on');
          }, 3000);
        }
      }
    }
  };

  • timer変数は関数の外で宣言する必要があります.関数内で宣言すると、timerの作成と削除が繰り返され、点滅が発生します.

  • まずquerySelectorAllを使用します.tab-itemクラスのすべてのdome要素を取得します.

  • オブジェクト形式の結果値を使用してfor文でactive要素を検索します.

  • classを追加して、アクティブな要素のサブ要素を検索し、cssを追加します.

  • このとき、「on」が追加された要素をフィルタする条件文を追加します.

  • classNameのないdom要素にアクセスし、最初のサブ要素、すなわちスクロールする要素にclassを追加します.

  • settimeout()を呼び出し、3秒後にclassName"on"を削除します.

  • このまま終わると、ずっと点滅してしまいます.

  • 「on」クラスの有無を決定する前に、clearTimeout(timer)を使用してsettimeoutを適切に終了する必要があります.
    • Inline Variable - Refactoring skills(4)
    AndroidはすべてのActivityにグローバルカスタムメニューを追加