Javascript SetTimeout和循環

專家。 Javascript沒有產生期望的延遲效果。
從其他問題，所以我才知道，問題是settimeout和我使用它的方式。但是我仍然無法理解，Settimeout是如何工作的。所以我把代碼放在這裏。只需要使用Javascript，因爲知識的目的。
其實我試圖清除我的這個關於的概念，在javascript中關閉。他們是一種Javascript的扭曲的東西？Javascript SetTimeout和循環

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'; 
}

來源

2013-02-09 msinfo

while循環工作normal.I've測試了鍍鉻的控制檯上。 – Ramin 2013-02-09 20:34:45

@ramin omrani - 是真的嗎？但圖像沒有得到2秒延遲效果的調整。我知道我已經搞砸了SetTimeout，但不知道它的內部工作還沒完。 – msinfo 2013-02-09 20:45:15

你有兩個問題：

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的回調使用。

來源

2013-02-09 20:22:24

嗨@dystroy - 沒有成功。您的代碼使瀏覽器無法響應。 – msinfo 2013-02-09 20:42:16

@msinfo我的第一個版本是錯誤的（關閉時沒有增加）。你可以試試最後一個嗎？ – 2013-02-09 20:43:06

是的，它確實有效。你能否解釋一下，while循環的兩個迭代，以及在這些條件下t和沒有變量的值。謝謝（隨着所有這些多個編輯。:-) – msinfo 2013-02-09 22:29:30

爲什麼不直接使用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'; 
}

來源

2013-02-09 20:37:25 daleyjem

他他他:-)它的工作方式。其實我寫了上面的測試代碼來測試我對settimeout和其他事情的知識，在這裏我學到了這樣做的方式。只要有人解釋我的代碼中settimeout發生了什麼，就會將其標記爲答案。謝謝。 – msinfo 2013-02-09 20:50:57

您的代碼無法按照您的想法操作，因爲您認爲每當從上一次setTimeout（）過去時，每個setTimeout（）都會被調用。但事實並非如此。所有這些setTimeout（）都將在同一時間立即被調用。 – daleyjem 2013-02-09 23:53:18

哦！我明白，我確實在想你想出的方式。但哎呀！因爲@dystroy提供了settimeout選項的解決方案，並且他多次編輯他的答案以通知我。我正在接受他的回答並對你的投票進行投票。 – msinfo 2013-02-09 23:58:06

你的問題是與你的尺寸（）函數的語法&算法：

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/

來源

2013-02-09 20:41:38 Ramin

Javascript SetTimeout和循環

回答

相關問題