wkwebviewの中でfor文が動かなかった – Javascript

説明と結論

wkwebviewの中でjsが動かなくなりまして、その原因は、jsで書かれたループの場所で起こっていることが判明しました。配列の数だけループする処理をjsで書いてたんです。ブラウザではちゃんと実行されるんですが、何故かwkwebviewの中では動かなかったんです。

詳しく説明すると、for文でループをするたびに、document.createElementimg要素を作って画面に描画するというものでした。ブラウザではちゃんとループした数だけimg要素が画面に出力されたのに、wkwebviewはだめ。最初は、domが完成した後にjsを実行すればいいかな?とか思ったんですが、だめでした。

答えは、ループの中にありました。ループするごとにimg要素を作って画面に描画されるわけですが、そのスピードについて来れなかったんですね。wkwebview。ブラウザは優秀ですが、wkwebviewは優秀ではないですね。

下記のようにして、一回ループするごとに、一旦ループ処理を止め、数秒後、またループのn回目を実行するようにすればいけました。

実装

var i = 1;                     //  set your counter to 1

function myLoop () {           //  create a loop function
   setTimeout(function () {    //  call a 3s setTimeout when the loop is called
      alert('hello');          //  your code here
      i++;                     //  increment the counter
      if (i < 10) {            //  if the counter < 10, call the loop function
         myLoop();             //  ..  again which will trigger another 
      }                        //  ..  setTimeout()
   }, 3000)
}

myLoop();     

参考

How do I add a delay in a JavaScript loop?

環境

  • swift
  • swift3
  • wkwebview
  • webview
  • js
  • javascript
  • for
藤沢瞭介(Ryosuke Hujisawa)
  • りょすけと申します。18歳からプログラミングをはじめ、今はフロントエンドでReactを書いたり、AIの勉強を頑張っています。off.tokyoでは、ハイテクやガジェット、それからプログラミングに関する情報まで、エンジニアに役立つ情報を日々発信しています!

未整理記事