JavaScriptでブラウザをスクロールさせたい

Question

概要

Chrome上でタブを複数生成し、それぞれを既定量スクロールさせる処理を書いています。

実現したいこと

下記の内容を実現したいです。

1. 同一URLのタブを複数生成
2. タブそれぞれをスクロール
3. 各タブのスクロールを連動させる

この中で特に2の実現方法がわからず悩んでいるので助言いただきたいです。

  let tab0;
  let tab1;
  let tab2;
  for(i = 0; i < TileCount; i++){
	  let tab = eval("tab"+i)
	  OpenTab(tab);
	  async function OpenTab(sideTab){
		sideTab = window.open(sideUrl); //1. 同一URLのタブを複数生成

		const _sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
		await _sleep(3000);

		sideTab.scrollTo(0, windowHeight * (i + 1)); //2. タブそれぞれをスクロール

		document.addEventListener('scroll', e => {
			sideTab.scrollTo(window.scrollX + adjX, window.scrollY + adjY); //3. 各タブのスクロールを連動させる
		});

	  }
  }

試したこと

グローバルな変数tab0 tab1 tab2を用いずに、forの中でタブウィンドウを代入する変数let sideTabを宣言しますと
生成したタブはスクロールされますが、全てのスクロール量が同一になってしまします。
sleep()の引数を変えると微妙にスクロール量がそれぞれバラけますがほとんど同じスクロール量です。

解決の糸口がまるで見えないので助力いただけると幸いです。
宜しくおねがいします。

Comments

[hoshi-takanori]

変数 tab0, tab1, tab2 じゃなくて、配列を使うと良いかも。

[mozamoza_fruit]

コメントありがとうございます！

let tab 0;～ではなく
let arrary = [,,,];としてやってみましたが
scrollイベント内の array[i].scrollTo() 部分で`i`番目が見つからないというエラーが出てスクロールされませんでした。。
let array; として宣言時は空にしてもやってみましたが、今度はOpentab関数内の sideTab[i].scrollTo() で上記同様のエラーがでてしまいました。。

Answer 1

御回答ありがとうございます!
返信遅れてしまいすみません。。

openTab()の実行はfor(){}のスコープ内なので、openTab()の処理が終ってからiがインクリメントされるという認識でしたが
jsの仕様だとそうはならないのでしょうか?

基本的なことかと思いますが教えて頂ければ幸いです。

Answer 2

sideTab.scrollTo(0, windowHeight * (i + 1)); を実行している時点で外側のループが終了しているため、常に i の値が TileCount になっているのだと思います。現在のコードだと、複数のOpenTab()関数が実行されてもみんな同一のiを参照しています。

OpenTab()に i の引数を与えるとよさそうです。

      OpenTab(tab, i);
      async function OpenTab(sideTab, i) {

Comments

[mozamoza_fruit]

御回答ありがとうございます!
返信遅れてしまいすみません。。

openTab()の実行はfor(){}のスコープ内なので、openTab()の処理が終ってからiがインクリメントされるという認識でしたが
jsの仕様だとそうはならないのでしょうか?

基本的なことかと思いますが教えて頂ければ幸いです。

[int32_t]

OpenTab()の呼ぼだしに await が付いていないため、forループ内で実行されるのはOpenTab()内の最初のawaitの前までです。