Javascript SetTimeout и петли

Question

Эксперты. Javascript не создает желаемый эффект задержки.
Из других вопросов, на SO, я должен знать, что проблема связана с настройкой и тем, как я ее использую. Но все же я не могу понять, как работает Settimeout. Итак, я помещаю код здесь. Необходимо использовать только Javascript, из-за цели знания.
На самом деле я пытаюсь очистить свои понятия о это, закрытие в javascript. Являются ли они извращенными вещами Javascript?

var objImg = new Object(); 
var h; 
var w; 

var no = 100; 
while (no != 500) { 
    setTimeout(function() { 
     size(no, no); 
    }, 2000); 

    /* it's get executed once, instead of repeating with while loop 
    Does it leave loop in mid? I get image with 500px height and 
    width, but effect is not acheived. 
    */ 

    no = no + 50; 
} 

function size(h, w) { 
    var objImg = document.getElementsByName('ford').item(0); 
    objImg.style.height = h + 'px'; 
    objImg.style.width = w + 'px'; 
} 

Answer 1

У вас есть две проблемы:

• no будет иметь значение конца цикла, когда функция вызывается
• вы программируете все ваши таймаутов 2000 мс с тем, время цикла.

Вот как можно исправить:

var t = 0 
while (no != 500) { 
    (function(no) { 
     t += 2000; 
     setTimeout(function() { size(no,no);} ,t); 
    })(no); 
    no = no+50; // could be written no += 50 
} 

Немедленно выполняется функция создает область, которая защищает значение no.

---

Небольшое пояснение о (function(no) {:

Область действия переменной либо

• глобальный масштаб
• функция

Код выше может быть написано как

var t = 0 
while (no != 500) { 
    (function(no2) { 
     t += 2000; 
     setTimeout(function() { size(no2,no2);} ,t); 
    })(no); 
    no += 50; 
} 

Здесь, вероятно, более ясно, что у нас есть две переменные:

• no, значение которого изменяется с каждой итерации и 500, когда тайм-ауты называются
• no2, на самом деле одна переменная no2 пер вызов внутренней анонимной функции

Каждый раз, когда вы вызываете внутреннюю анонимную функцию, она объявляет новый no2, значение которого равно no во время вызова (во время итерации). Эта переменная no2, таким образом, защищена и используется обратным вызовом, заданным setTimeout.

Answer 2

Почему бы просто не использовать setInterval() вместо этого?

var objImg = new Object(); 
var h; 
var w; 

var no = 100; 
var myInterval = window.setInterval(function() { 
    size(no, no); 
    no = no + 50; 
    if (no >= 500) clearInterval(myInterval); 
}, 2000); 

function size(h, w) { 
    var objImg = document.getElementsByName('ford').item(0); 
    objImg.style.height = h + 'px'; 
    objImg.style.width = w + 'px'; 
} 

Answer 3

Ваша проблема с синтаксисом функции размера() & алгоритм:

var objImg = new Object(); 
var h; 
var w; 

var no = 100; 

var int = window.setInterval(function() { 
    size(no,no); 
    no += 50; 
},2000) 

function size(h, w) { 
    if (h == 500){ 
     window.clearInterval(int); 
     return; 
    } 
    var height = h + 'px'; 
    var width = w + 'px'; 
    document.getElementsByName('ford').item(0).style.height = height; 
    document.getElementsByName('ford').item(0).style.width = width; 
} 

http://jsfiddle.net/AQtNY/2/