鍍金池/ 問答/HTML  Office/ js如何同步執(zhí)行代碼

js如何同步執(zhí)行代碼

頁面代碼:

<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>秒后自動登錄跳轉(zhuǎn)到首頁</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;

這段代碼實現(xiàn)的效果是彈出一個框，并帶有倒計時特效，但是由于代碼是自上而下執(zhí)行的，所以倒計時的秒數(shù)會有延時

clipboard.png

clipboard.png
空了一下，才出現(xiàn)，然后到1秒就跳轉(zhuǎn)了頁面，沒有等到0秒

回答
編輯回答
玄鳥

javascript本身就是同步機制的，任務(wù)為棧型隊列，當(dāng)當(dāng)前任務(wù)執(zhí)行完成后才會繼續(xù)向下執(zhí)行。setTimeout屬于異步機制的一種。且，定時器的時間受當(dāng)前任務(wù)執(zhí)行和頁面響應(yīng)的影響。好了，說了一大堆，解決這個問題很好辦，直接寫一個倒計時，當(dāng)?shù)扔?時，執(zhí)行機制。大概的思路是setTimeOut(fn,time),time為變量。當(dāng)外部條件到達(dá)一定時，更改為0；或者其他方法調(diào)用也行。

2018年9月14日 08:29
編輯回答
舊酒館

這根同步不同不沒關(guān)系，單純是你倒計時設(shè)計的不好- -

var seconds = 10

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

setTimeout(countdown, 1000)

不用一開始就 setTimeout 10 秒，完全可以每秒倒數(shù)一下。雖說這樣子在極端情況下有可能倒數(shù)十下用時比 10 秒稍微多一點點，我想常見場景下沒有人會在乎這一點誤差- -

2018年6月6日 04:14
編輯回答
蝶戀花
function after(){  
    $("#time").css("color","red").empty().append(i);
    if(i === 0){
        window.location.href='/';
        return;
    }
    i=i-1; 
    setTimeout(function(){
        after();
    },1000);
}
2018年4月7日 20:48