Comments on: setTimeout のコールバック関数内でローカル変数を使用する

By: nanto_vi

nanto_vi — Fri, 12 Oct 2007 14:38:12 +0000

ジェネレータを使った別解としてこんなのも考えられますね。基本的な発想はhot_coffeeさんと同じです。

function arrayValues(array) {
  for (var i = 0; i < array.length; i++)
    yield array[i];
}
function forEachLater(array, callback, interval) {
  var values = arrayValues(array);
  setTimeout(function () {
    try {
      callback(values.next());
      setTimeout(arguments.callee, interval);
    } catch (ex if ex instanceof StopIteration) {}
  }, interval);
}
forEachLater(["apple", "orange", "banana"], print, 1000);

By: Gomita

Gomita — Fri, 12 Oct 2007 02:49:00 +0000

nanto_viさんご指摘ありがとうございます。修正しました。 > 一つ一つ終わってから処理するあまり自信ないですけど、JS1.7でGenerator使うとこんな感じでしょうか。

function generator() {
    var fruits = ["apple", "orange", "banana"];
    for (var i = 0; i < fruits.length; i++) {
        alert(fruits[i]);
        yield true;
    }
    yield false;
}
function driveGenerator() {
    if (gen.next())
        window.setTimeout(driveGenerator, 1000);
    else
        gen.close();
}
var gen = generator();
driveGenerator();

By: hot_coffee

hot_coffee — Thu, 11 Oct 2007 19:21:59 +0000

一つ一つ終わってから処理するときはこうしてます。

function setFruitsAlert(fruits) {
   i = 0;
   function g() {
      if(i < fruits.length) {
         window.setTimeout(function(fruits) {
            alert(fruits[i]);
            i++;
            g();
         }, 1000);
      }
   }
   g();
}

var fruits = ["apple", "orange", "banana"];

setFruitsAlert(fruits);

By: os0x

os0x — Tue, 09 Oct 2007 03:35:06 +0000

便乗させて頂いて、自分ならこう書くかなと。

var fruits = ["apple", "orange", "banana"];
for (var i = 0; i < fruits.length; i++) {
  (function(fruit){
    window.setTimeout(function() { alert(fruit); }, 1000);
  })(fruits[i]);
}

By: nanto_vi

nanto_vi — Mon, 08 Oct 2007 15:28:52 +0000

Firefox 2 以降で JavaScript のバージョンを 1.7 以上に指定すれば、

for (var i = 0; i < fruits.length; i++) {
  window.setTimeout(let (fruit = fruits[i]) function() { alert(fruit); }, i * 1000);
}

でもいけますね。(Firefox 3 ならバージョンを明示的に指定しなくても使えたかも)

あるいは、

for (var i = 0; i < fruits.length; i++) {
  with ({ fruit: fruits[i] }) {
    window.setTimeout(function() { alert(fruit); }, i * 1000);
  }
}

とすれば Firefox 1.0 でも OK ですし。

いずれにせよ、「コールバック関数が呼び出されたときにはすでにローカル変数 i は破棄されている」というのは間違いで、i の値が 4 になっているから fruits[i] が undefined になっているだけです。

By: Gomita

Gomita — Mon, 08 Oct 2007 12:41:02 +0000

そういう手もありましたか。サンクスです。本文へ加筆しました。

By: Piro

Piro — Mon, 08 Oct 2007 08:20:54 +0000

コールバック関数の部分が複雑になる場合は、こっちの方がお勧めかも……

for (var i = 0; i < fruits.length; i++) {
    window.setTimeout(function(aArg) { alert(aArg); }, i * 1000, fruits[i]);
}