Question

我没有编码一段时间所以我需要问这个愚蠢的问题：

我在网页上有一张图片，上面有以下src：“images / santa / 1.jpg”

每250毫秒，“1.jpg”应该用“2.jpg”，“3.jpg”等替换，直到30，然后停止，然后它应该激活“谢谢”功能，这不是定义了。我做错了什么？

var theSanta = $('div#main img#theSanta');  

        //case 1: theSanta.attr('src', 'images/santa/1.jpg');

 setInterval(function() {

    for(var i=1; i<31; i++) {
        theSantaSrc = 'images/santa/' + i + '.jpg';
        theSanta.attr('src', theSantaSrc);
    }
}, 500);

}

Answer 1

删除for循环，并在每次间隔运行时进行计数。

var theSanta = $('div#main img#theSanta');  

var count = 1;
var counter = setInterval(function() {        
    theSantaSrc = 'images/santa/' + count + '.jpg';
    theSanta.attr('src', theSantaSrc);

    if (count >= 30) {
       counter.clearInterval();
       alert('Thanks!');
    }
    else count++;
}, 500);

Answer 2

我做错了什么？

我们来看看这段代码：

setInterval(function() {

    for(var i=1; i<31; i++) {
        theSantaSrc = 'images/santa/' + i + '.jpg';
        theSanta.attr('src', theSantaSrc);
    }
}, 500);

在setInterval中定义for循环。所以每500毫秒，for循环执行30次。摆脱for循环，你不需要它。

var i = 1;
var interval = setInterval(function() {
    if (i < 31){ // check the step count
        theSantaSrc = 'images/santa/' + i + '.jpg';
        theSanta.attr('src', theSantaSrc);
        i++;
    } else { // stop the interval
        clearInterval(interval);
        thanks(); // execute your thanks function here
    }
}, 500);

替换30张图像，然后停止

2 个答案: