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；或者其他方法调用也行。