Javascriptのfor文とbindメソッド

で使用されているJavascript、最後のsetTimeoutを使った制御の中で
indexという変数が使用されています。
（「表示のタイミングを時間でずらす機能を追加」の部分

for文のiの意味で使用されているみたいですが、宣言されていません。
setTimeout内のfunctionにつづくbindメソッドにてiが渡されています。

bindメソッドは引数として渡したプロパティを結合した関数に渡す？
物のようですが、まだよく理解できていません。

setTimeout内のindexはBindメソッドによってiが渡されたということでしょうか。
（試しにindexをiに置き換えても動作しているようです。
（またiを使用してかつbindを削除すると動作しません、、

var scrollAnimationElm = document.querySelectorAll('.sa');
var scrollAnimationFunc = function() {
  for(var i = 0; i < scrollAnimationElm.length; i++) {
    var triggerMargin = 300;
    var elm = scrollAnimationElm[i];
    var showPos = 0;
    if(elm.dataset.sa_margin != null) {
      triggerMargin = parseInt(elm.dataset.sa_margin);
    }
    if(elm.dataset.sa_trigger) {
      showPos = document.querySelector(elm.dataset.sa_trigger).getBoundingClientRect().top + triggerMargin;
    } else {
      showPos = elm.getBoundingClientRect().top + triggerMargin;
    }
    if (window.innerHeight > showPos) {
      var delay = (elm.dataset.sa_delay)? elm.dataset.sa_delay : 0;
      setTimeout(function(index) {
        scrollAnimationElm[index].classList.add('show');
      }.bind(null, i), delay);
    }
  }
}
window.addEventListener('load', scrollAnimationFunc);
window.addEventListener('scroll', scrollAnimationFunc);

直感的にはfor分のiが利用できないのは不思議でした。
Javascript特有の変数スコープのふるまいなのでしょうか。

もっとJS勉強進めますが、
indexが使える理由、Bindの役割、Bindを利用しないといけない理由だけでも
大まかでよいので教えてもらえましたら助かります。

よろしくお願いします。

takasima20

2021/12/19 20:48

無名関数の引数として宣言されてますが、そういう意味じゃなくて?

m.ts10806

2021/12/19 21:06

https://developer.mozilla.org/ja/docs/Web/API/setTimeout 無名関数の引数ですね。

webserviceNI

2021/12/19 22:56

回答ありがとうございます。 function(index){~~}~~ の部分は無名関数かと思うのですが、このSetTimeoutの引数としての関数に、 Forループのiが渡せない（bindを通してiを渡さないといけない）理由が知りたくて質問させてもらいました。 ”this問題”という問題なのでしょうか

m.ts10806

2021/12/19 23:00

＞渡せない実際に書いてみたのでしょうか。

行動規範の内容に同意します

回答1件

ベストアンサー

このSetTimeoutの引数としての関数に、Forループのiが渡せない（bindを通してiを渡さないといけない）理由

varで渡そうとすると、タイマーが働いたときにはループを抜けていますので、ループが終わった後の値が渡されてしまうこととなります。

なお、iをletで宣言できる環境では問題ありません。

投稿2021/12/19 23:01

maisumakun

総合スコア146018

webserviceNI

2021/12/20 14:58 編集

回答ありがとうございます。 SetTimeoutのような特殊な条件下でということだったんですね。。実際に、SetTimeoutを取り除くと ``` if (window.innerHeight > showPos) { scrollAnimationElm[i].classList.add('show'); } とすると ``` iで動作しました。 > なお、iをletで宣言できる環境では問題ありません。こちらはまだよくわかりませんでした、、 letはvarよりもより狭いスコープということなので、なぜ大丈夫なのでしょうか。