Question

我目前有一个倒数计时器，每隔30秒刷新一次图像。这段代码一直很适合我。

<script type="text/javascript">
jQuery(document).ready(function() {
var countdown = 30;
jQuery('#countdown').html(countdown);
setInterval(function() {
    countdown--;
    jQuery('#countdown').html(countdown);
            if (countdown <= 0)
    {
        jQuery('.imagerefresh').attr('src', jQuery('.imagerefresh').attr('src'));
        countdown = 30;
        jQuery('#countdown').html(countdown);
            }
}, 1000);
});
</script>

我正在尝试添加以下代码以获取10秒标记的新图像并将其本地保存在服务器上。当我将它添加到上面的代码中（在第7行之前，“if（倒计时＆lt; = 0）”）时，它似乎得到了新的图像并在10秒标记处保存得很好，但在图像刷新时为0图像似乎刷新的秒数然后立即崩溃。

if (countdown <= 10)
{
     jQuery.get('/path/to/file/getnewimage.php');
}

有关如何修复图像崩溃的建议？或者有关更高效代码的建议，以便在页面上刷新之前获取新图像。感谢。

Answer 1

停止使用setInterval （http://www.youtube.com/watch?feature=player_detailpage&v=i_qE1iAmjFg#t=462s）怎么样：

http://jsfiddle.net/coma/2Jaqy/7/

$(function() {

    var max = 30;
    var countdown = max;
    var img = $('#image');
    var display = $('#countdown');

    img.load(function(event) {

        setTimeout(refresh, 1000);

    });

    var load = function(url) {

        var ts = (new Date()).getTime();
        img.attr('src', url + '?ts=' + ts);

    };

    var get = function() {

        //$.get('/path/to/file/getnewimage.php', load);
        setTimeout(function() {

            load('http://lorempixel.com/400/200/');

        }, 500);

    };

    var refresh = function() {

        display.text('wait ' + countdown + ' seconds...');
        countdown--;

        if(countdown < 0) {

            countdown = max;
            get();

        } else {

            setTimeout(refresh, 1000);

        }

    };

    get();

});

并注意图像加载。

单个setInterval下的不同时间的多个函数（function（）

1 个答案: