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 = 10

function countdown() {
  seconds--
  if (seconds <= 0) {
    window.location.href = 'xxx'
  } else {
    // 修改界面上显示的数字
    setTimeout(countdown, 1000)
  }
}

setTimeout(countdown, 1000)

不用一开始就 setTimeout 10 秒，完全可以每秒倒数一下。虽说这样子在极端情况下有可能倒数十下用时比 10 秒稍微多一点点，我想常见场景下没有人会在乎这一点误差- -

Answer 2

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

Answer 3

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