问setInterval中的Javascript setTimeout
EN

Stack Overflow用户

提问于 2013-07-14 07:16:56

回答 2查看 2.1K关注 0票数 1

我这里有个问题..我使用setInterval函数将页面加载到div中，每30秒加载一次。好吧..。在该页面中，我有另一个setInterval函数，它由每秒更改一个数字倒计时组成。问题是，一次倒计时会跳过3秒，即使它必须在1秒内回调。就像: 01:24 -> 01:21 -> 01->19...

下面是我的第一个setinterval的代码：

<script>
    var t;
    t=setInterval(function(){
        $.get('<?=return_url("php/home_new.php");?>', { k: "1" } ).done(function(data){
            if(data)$("#ex_start_test").html(data);});
        },
        30000
    );
</script>

以及倒计时的代码：

<?
$query=q_return("SELECT nume, cod, data, MINUTE(data_start) as minute, data_start FROM chestionare WHERE data_start>date_sub(now(), interval 2 minute)");?>

<script>
    var timp_c="<?=$query['minute'];?>";
    var sec;
    var min;
    $.get('<?=return_url("php/getimp.php");?>', { k: "sec" } ).done(function(data){sec=data;});
    $.get('<?=return_url("php/getimp.php");?>', { k: "min" } ).done(function(data){min=data;});

    setTimeout(refresh, 1000);

    function refresh(){
        if(sec>=1){
            sec=sec-1; 
        }else{
            min=min-1;
            sec=59;
        }

        if(sec<10){
            $("span#ex_start_timp_ramas_sec").each(function(){
                $(this).html("0"+sec);
            });
        }else{
            $("span#ex_start_timp_ramas_sec").each(function(){
                $(this).html(sec);
            });
        }
               $("span#ex_start_timp_ramas_min").each(function(){
            $(this).html(min);
        });

        if(sec==0 && min==0){
            //$("#ex_click_final").trigger('click');
            clearInterval(t);
            $("#ex_new_test").hide();
        }

        setTimeout(refresh, 1000);
    } 
</script>

jquery

setinterval

php

javascript

回答 2

Stack Overflow用户

回答已采纳

发布于 2013-07-14 07:33:21

我猜您的问题在于，每次使用setInterval重新加载页面时，您都会产生另一个setTimeout链，而没有清除前一个链。

尝试保存timeoutId并将其清除，将其作为倒计时代码的第一件事。像这样的东西应该是有效的：

<?
$query=q_return("SELECT nume, cod, data, MINUTE(data_start) as minute, data_start FROM chestionare WHERE data_start>date_sub(now(), interval 2 minute)");?>

<script>
var timp_c="<?=$query['minute'];?>";
     var sec,
         min,
         timeoutId;
     $.get('<?=return_url("php/getimp.php");?>', { k: "sec" } ).done(function(data){sec=data;});
     $.get('<?=return_url("php/getimp.php");?>', { k: "min" } ).done(function(data){min=data;});

     if (timeoutId) {
         clearTimout(timeoutId);
     }

     timeoutId = setTimeout(refresh, 1000);

     function refresh(){
         if(sec>=1){
             sec=sec-1; 
         }else{
             min=min-1;
             sec=59;
         }

         if(sec<10){
             $("span#ex_start_timp_ramas_sec").each(function(){
                 $(this).html("0"+sec);
             });
         }else{
             $("span#ex_start_timp_ramas_sec").each(function(){
                 $(this).html(sec);
             });
         }

         $("span#ex_start_timp_ramas_min").each(function(){
             $(this).html(min);
         });

         if(sec==0 && min==0){
             //$("#ex_click_final").trigger('click');
             clearInterval(t);
             $("#ex_new_test").hide();
         }

         timeoutId = setTimeout(refresh, 1000);
    }
</script>

票数 0

Stack Overflow用户

发布于 2013-07-14 08:00:18

我认为这里的问题是，您发出了两个Ajax请求，然后您希望启动计时器，但这些请求需要时间来执行，因为它们是异步的，这可以解释您看到的结果。

$.when()拯救了我们：

var $getsec = $.get('<?=return_url("php/getimp.php");?>', { k: "sec" } ),
$getmin = $.get('<?=return_url("php/getimp.php");?>', { k: "min" } );

$.when($getsec, $getmin).done(function($sec, $min) {
    min = $min[0]; // [0] = data
    sec = $sec[0];
    // start refresh
    setTimeout(refresh, 1000);
});