85693


observerを用いて特定の要素を監視したいのですが、ページ読み込み直後にはその要素が存在していないため、`var target =
document.querySelector('ul[id="item-
grid"]');`として要素を取得し、その値が`null`だったなら繰り返し処理をさせるというように書きました。

[code]

    function LW() {
      var target = document.querySelector('ul[id="item-grid"]');
      if ( target === null ) {
        setTimeout( LW, 500 );
        return;
      }
      var observer = new MutationObserver(records => {
        console.log("TEST");
      })
      observer.observe(target, {childList: true})
    }
    LW()
    
[/code]

その後、要素が見付かり次第observerを実行させたいのですが、この書き方だとどうもうまく動作しません。  
恐らく`LW()`が閉じるタイミングで動作が終了してしまっているからだと思います。

どのように記述すればページの読み込みが完了した段階でobserverを発火出来るのか教えて頂けると幸いです。


CC BY-SA 4.0
2022-01-14T06:46:45.480
85684
2022-01-14T10:19:39.187
31483
question
javascript
ページの読み込みが終わってからobserverを実行したい。


こちらのページにいい例があります。

[【JavaScript】条件を満たすまで待機する処理の書き方 – 株式会社シーポイントラボ ｜ 浜松のシステム・RTK-
GNSS開発](https://cpoint-lab.co.jp/article/202102/18758/)

このページのコードを拝借すれば

[code]

    let target = null;
    
    function waitAsync(conditionCallback, resolve,intervalMilliSecond = 500){
      if(conditionCallback()){
        resolve();
        return;
      }
      const intervalId = setInterval(()=>{
        if(!conditionCallback()){
          return;
        }
        clearInterval(intervalId);
        resolve();
      }, intervalMilliSecond)
    }
     
    const observer = new MutationObserver(records => {
      console.log("TEST");
    });
    
    waitAsync(
      () => {
        target = document.querySelector('ul[id="item-grid"]');
        return target !== null;
      },
      () => {
        observer.observe(target, {childList: true});
        console.log('ok');
      }
    );
    
[/code]

と書けますね。

テストのため、上記のコードの前に下記のコードを加えて、2秒後に`target`が作られるようにしてみましょう。

[code]

    function add_ul() {
      const ul = document.createElement('ul');
      ul.id = 'item-grid';
      document.body.appendChild(ul);
    }
    setTimeout( () => add_ul(), 2000 );
    
[/code]

コードを走らせると、数秒後にコンソールに`"ok"`が表示されることが確認できました。


CC BY-SA 4.0
2022-01-14T08:04:25.080
85693
2022-01-14T10:19:39.187
2022-01-14T10:19:39.187
45045
45045
85684
answer