js如何同步执行代码

Question

页面代码:

<div id="faqdiv" style="display:none;">

    <h1>恭喜,注册成功!</h1>

    <h3><span id="successName" style="color: orangered"></span>大人,您好，要不要<a>马上去登陆</a>...</h3>

    <h4>或者<span id="time">10</span>秒后自动登录跳转到首页</h4>

    <h5><a href="/">| 还是算了，不登录，去首页逛...</a></h5>

    <div id="loader">

        <div id="top"></div>

        <div id="bottom"></div>

        <div id="line"></div>

    </div>

</div>

js代码：

setTimeout(function(){

    window.location.href='/';

},10000);//10秒后返回首页

after();

var i=10;

//自动刷新页面上的时间

function after(){

    $("#time").css("color","red").empty().append(i);

    i=i-1;

    setTimeout(function(){

        after();

    },1000);

}

$("input[name='userName']").siblings(".form_hint").hide();

$("#faqbg").css({display:"block",height:$(document).height()});

$("#successName").text($("input[name='userName']").val());

$("#faqdiv").css("top","280px");

$("#faqdiv").css("display","block");

document.documentElement.scrollTop=0;

这段代码实现的效果是弹出一个框，并带有倒计时特效，但是由于代码是自上而下执行的，所以倒计时的秒数会有延时

空了一下，才出现，然后到1秒就跳转了页面，没有等到0秒

Answer 1

这根同步不同不没关系，单纯是你倒计时设计的不好- -var seconds = 10function countdown() {&nbsp; seconds--&nbsp; if (seconds <= 0) {&nbsp; &nbsp; window.location.href = 'xxx'&nbsp; } else {&nbsp; &nbsp; // 修改界面上显示的数字&nbsp; &nbsp; setTimeout(countdown, 1000)&nbsp; }}setTimeout(countdown, 1000)不用一开始就 setTimeout 10 秒，完全可以每秒倒数一下。虽说这样子在极端情况下有可能倒数十下用时比 10 秒稍微多一点点，我想常见场景下没有人会在乎这一点误差- -

Answer 2

function after(){&nbsp;&nbsp;&nbsp; &nbsp; $("#time").css("color","red").empty().append(i);&nbsp; &nbsp; if(i === 0){&nbsp; &nbsp; &nbsp; &nbsp; window.location.href='/';&nbsp; &nbsp; &nbsp; &nbsp; return;&nbsp; &nbsp; }&nbsp; &nbsp; i=i-1;&nbsp;&nbsp; &nbsp; setTimeout(function(){&nbsp; &nbsp; &nbsp; &nbsp; after();&nbsp; &nbsp; },1000);}

Answer 3

javascript本身就是同步机制的，任务为栈型队列，当当前任务执行完成后才会继续向下执行。setTimeout属于异步机制的一种。且，定时器的时间受当前任务执行和页面响应的影响。好了，说了一大堆，解决这个问题很好办，直接写一个倒计时，当等于0时，执行机制。大概的思路是setTimeOut(fn,time),time为变量。当外部条件到达一定时，更改为0；或者其他方法调用也行。