4

専門家。Javascript が目的の遅延効果を生成していません。
他の質問から、問題は settimeout とその使用方法にあることがわかりました。しかし、まだ 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';
}
4

3 に答える 3

4

2 つの問題があります。

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

ここでは、おそらく 2 つの変数があることがより明確になります。

  • no、値は反復ごとに変化し、タイムアウトが呼び出されると 500 になります
  • no2、実際no2には内部匿名関数の呼び出しごとに1 つの変数

内部匿名関数が呼び出されるたびに、新しいno2変数が宣言されます。その値はno、呼び出し時 (反復中) です。したがって、この変数no2は保護され、 に指定されたコールバックによって使用されますsetTimeout。

于 2013-02-09T20:22:24.570 に答える
3

代わりに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-09T20:37:25.870 に答える
0

あなたの問題は、 size() 関数の構文とアルゴリズムにあります:

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-09T20:41:38.180 に答える