0

私には2つの機能があります

 function getImgStr(imgName){
        thisStr = '<img src="/_shared/img/discovery/200x100/'+imgName+'.jpg">';
        return thisStr;
    }
    function buildIt(imgSrc){
        console.log(imgSrc);
        $('#content').append('<div></div>');
        $('#content div:last').hide()
            .addClass('imgBox')
            .attr('id',imgSrc)
            .html(getImgStr(imgSrc))
            .slideDown(2000);
    }

ループしている配列があります

$(function(){
        for(i=0;i<=imgList.length-1;i++){
                buildIt(imgList[i]);
        }
    });

正常に動作し、probelmsはありません。

しかし、私がラップしようとすると、これはsetIntervalisbarfsです

$(function(){
        for(i=0;i<=imgList.length-1;i++){
            var loadIt = setInterval(function(){
                buildIt(imgList[i]);
            },1000);
        }
    });

buildItのconsole.logは、setIntervalが存在する場合は未定義であるため、間隔が何らかの形でループに影響を与えると想定していますが、何が間違っているのかわかりません。何か案は？

4

3 に答える 3

2

あなたの説明によると：毎秒画像を次々にロードしたい場合は、このようなことをすることができます。ループはまったく必要ありません。

var i = 0;
var id = setInterval(function() {
    if(i === imgList.length) {
        clearInterval(id);
    } else {
        buildIt(imgList[i++]);
    }
}, 1000)

これは、の値iを0に初期化します。forループとiまったく同じように機能します。iそれは本質的にインデックスです。次に、間隔の値を変数内に格納しますid。このようにして、間隔への参照を維持し、画像の読み込みが完了したときに間隔をクリアできるようにします。

i最後に、interval関数内で、画像リスト内の画像数の長さに等しいかどうかを確認します。そうである場合は、それらすべてのロードが完了したことがわかっているので、間隔をクリアします。buildItそれ以外の場合は、の現在の値に対応する画像の関数を呼び出し、iの値をインクリメントしますi。

于 2012-09-13T21:29:56.767 に答える
1

フィドルで更新

   this.buildIt= function(imgSrc){
    console.log("test"+imgSrc)
    console.log(imgSrc.length)
        };

$(function(){ 
      var imgList=[
"test1","test2","test3","test4"
]
        for(i=0;i<=imgList.length;i++){

            var loadIt = setInterval(function(){
                this.buildIt(imgList);
            },1000,imgList);
        }
    });​
于 2012-09-13T21:20:20.727 に答える
0

更新：OPが何をしようとしているのかはまだ完全にはわかりませんが、私の理解に基づいて、ヒープ上の別のソリューションを検討します。N個の画像があり、それらの画像を1秒ごとに順番に更新したいとします。そのためには、をと組み合わせる必要がありsetTimeoutますsetInterval。は画像のsetTimeout更新をずらし、setInterval各画像を順番に更新します。外観は次のとおりです。

function start() {
    var nImages = 5;
    for( i=0; i<nImages; i++ ) {
        (function(j){
            setTimeout( function() {
                buildIt(j);
                intervals.push(
                    setInterval( function() {
                        buildIt(j);
                    }, 1000*nImages )
                );
            }, j*1000 );
        })(i);
    }
}

function stop() {
    for( i in intervals ) {
        clearInterval( intervals[i] );
    }
}

これを示すjsFiddleは次のとおりです：http：//jsfiddle.net/FtCCs/

そして、これが私の以前の答えです：Vivinは正しい方向に進んでいますが、クロージャーの問題をスタックのさらに下に押しているだけなので、彼の解決策も機能しません。ただし、彼は1つの点で正しいです。buildIt関数呼び出しは、期待するインデックスを取得していませんが、すべて同じインデックスを取得しています。あなたがする必要があるのはこれです：

$(function(){
    for(i=0;i<=imgList.length-1;i++){
        (function(j){
            var loadIt = setInterval(function(){
                buildIt(imgList[j]);
            },1000);
        })(i);
    }
});

何が起こっているのかを完全に明確にするために、次の例を検討してください。

HTML：

<div id="wrong1">Wrong:<br /></div>
<div id="wrong2">Wrong:<br /></div>
<div id="wrong3">Wrong:<br /></div>
<div id="right">Right:<br /></div>

jQuery：

// won't work:
for(var i=0;i<5;i++) {
    setTimeout( function() { $('#wrong1').append(i+'<br />'); }, 500 );
}

// won't work:
for(var i=0;i<5;i++) {
    var j = i;
    setTimeout( function() { $('#wrong2').append(j+'<br />'); }, 500 );
}

// won't work:
for(var i=0;i<5;i++) {
    setTimeout( function() { (function(j){ $('#wrong3').append(j+'<br />'); })(i) }, 500 );
}

// works!
for(var i=0;i<5;i++) {
    (function(j){
        setTimeout( function() { $('#right').append(j+'<br />'); }, 500 );
    })(i);
}

ここでJsFiddleを設定して、デモンストレーションを行います：http: //jsfiddle.net/k3RJL/1/

すべての「間違った」例では、変数iorjはクロージャですが、関数がsetTimeout実行されるまでに、値はそのクロージャ内の最終値に変更されているため、すべて同じになります。の違いに注意してください：ループ内で定義されてwrong2いる変数を調べているため、最終的な値を受け取ることはありません。そのため、4で停止します。jfori

</ p>

于 2012-09-13T22:18:52.497 に答える