在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML/ js中如何讓setInterval倒計(jì)時(shí)中的alert順序執(zhí)行？

js中如何讓setInterval倒計(jì)時(shí)中的alert順序執(zhí)行？

關(guān)鍵代碼如下：

var sec = 10;
var t = setInterval(function(){
    sec--;
    $(".time").html(sec);
    if(sec == 0){
        alert("游戲結(jié)束，你的得分是" + score);
        clearInterval(t);
    }
},1000)

當(dāng)?shù)褂?jì)時(shí)到最后1秒的時(shí)候，會(huì)先彈出對(duì)話框，此時(shí)頁(yè)面上顯示的時(shí)間還是1s，等點(diǎn)擊確定后才會(huì)變成0。
我想要的效果是頁(yè)面上顯示倒計(jì)時(shí)為0的時(shí)候顯示彈出，而且點(diǎn)擊確定后時(shí)間不會(huì)變成-1，請(qǐng)問怎么實(shí)現(xiàn)呢？

回答
編輯回答
尛憇藌

圖片描述

2018年2月27日 08:52
編輯回答
撥弦

把sec變量聲明由var sec，改為let sec試試

2017年10月28日 04:56
編輯回答
尛曖昧

這是我的想法，直接復(fù)制粘貼運(yùn)行便可看到效果，希望能幫助到你：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<div class="time"></div>
    <script>
        var sec = 4;
        $(".time").html(sec);
        var t = setInterval(function(){
            if(sec == 1){
                clearInterval(t);                
                alert("確認(rèn)或關(guān)閉彈窗變?yōu)?");
                $(".time").html(0);
            } else {
                sec--;
                $(".time").html(sec);
            }
        },1000)
    </script>
</body>
</html>
2018年5月27日 14:03
編輯回答
舊酒館
    var sec = 3;
    var t = setInterval(function() {
        sec--;
        $(".time").html(sec);
        if (sec == 0) {
            setTimeout(function() {
                alert("游戲結(jié)束，你的得分是" /*+ score*/ )
            }, 0);
            clearInterval(t);
        }
    }, 1000);

分析：

這個(gè)代碼改不難，但是涉及到兩個(gè)知識(shí)點(diǎn)，題主需要了解下，

1、 修改 innerHTML 與 頁(yè)面渲染的問題

題主以為 alert() 先于 innerHTML 執(zhí)行了，實(shí)際上不是的，執(zhí)行順序還是從上往下的，先修改的 DOM 元素的 innerHTML ，然后執(zhí)行的 alert(),只不過 DOM 元素的 innerHTML 雖然改了，但是頁(yè)面的渲染并沒有進(jìn)行，因?yàn)?js 是單線程的，只有所有的代碼執(zhí)行完了之后，有空閑，才會(huì)去渲染頁(yè)面，實(shí)際上題主前面頁(yè)面的渲染都是在 if 語句執(zhí)行完后，主線程出現(xiàn)了空閑才進(jìn)行的。

咱們改個(gè)代碼，看得更清楚些：

    var sec = 3;
    var score = 100;
    var t = setInterval(function() {
        sec--;
        $(".time").html(sec);
        alert("游戲結(jié)束，你的得分是" + score);
        if (sec == 0) {
            clearInterval(t);
        }
    }, 1000);

這里每回都會(huì)更新頁(yè)面和alert()，代碼上先修改的 html,再 alert，但是實(shí)際運(yùn)行的時(shí)候，你會(huì)發(fā)現(xiàn)，是先 alert 再渲染的 html; 所以題主產(chǎn)生了錯(cuò)覺，innerHTML 延后執(zhí)行了；

總結(jié)：DOM修改是同步的，但是頁(yè)面的渲染要等主線程空閑；

2、 定時(shí)器的**工作機(jī)制**
除了主JavaScript 執(zhí)行進(jìn)程外，還有一個(gè)需要在進(jìn)程下一次空閑時(shí)執(zhí)行的代碼隊(duì)列；
定時(shí)器對(duì)隊(duì)列的工作方式是，當(dāng)特定時(shí)間過去后將代碼插入。注意，給隊(duì)列添加代碼并不意味著對(duì)它立刻執(zhí)行，而只能表示它會(huì)盡快執(zhí)行；
如果在這個(gè)時(shí)間點(diǎn)上，隊(duì)列中沒有其他東西，那么這段代碼就會(huì)被執(zhí)行；

在答案里，setTimout(fn,0)僅僅是立馬把 fn 添加到了任務(wù)隊(duì)列里，并沒有馬上執(zhí)行。

考慮兩處代碼：

setTimeout('alert(1)',0);
alert(2);
alert(3);

此時(shí)的主線程和任務(wù)隊(duì)列：

clipboard.png

隊(duì)列里的代碼等主線程空閑時(shí)才會(huì)執(zhí)行，所以 alert(1)，會(huì)等到alert(2),alert(3)執(zhí)行完畢后再執(zhí)行；

alert(1);
alert(2);
alert(3);

此時(shí)的主線程和任務(wù)隊(duì)列：

clipboard.png

所以代碼按照從上往下的順序正常執(zhí)行；

猜測(cè)，主線程在執(zhí)行完代碼后，會(huì)立馬進(jìn)行渲染，然后再執(zhí)行任務(wù)隊(duì)列里的代碼，既然是隊(duì)列，代碼執(zhí)行就是從第一個(gè)開始到最后一個(gè)結(jié)束。

所以等代碼執(zhí)行完畢主線程空閑時(shí)，首先執(zhí)行的是渲染，然后執(zhí)行的 alert();

總結(jié)：setTimout 是在指定間隔后，將代碼加入任務(wù)隊(duì)列里，等主線程空閑，執(zhí)行渲染，再依次執(zhí)行隊(duì)列里的代碼；

所以最前面的代碼加上 setTimeout 的作用就在于把代碼移到隊(duì)列里去了，等主線程空閑，頁(yè)面渲染，再執(zhí)行 alert();

    var sec = 3;
    var t = setInterval(function() {
        sec--;
        $(".time").html(sec);
        if (sec == 0) {
            setTimeout(function() {
                alert("游戲結(jié)束，你的得分是" /*+ score*/ )
            }, 0);
            clearInterval(t);
        }
    }, 1000);

參考資料：
Is innerHTML asynchronous?
When does InnerHTML execute immediately?
How to detect when innerHTML is complete
JavaScript 運(yùn)行機(jī)制詳解：再談Event Loop

2017年11月24日 07:54
編輯回答
懷中人
    var sec = 3; 
    var score = 100;
    var t = setInterval(function(){
        sec--;
        $(".time").html(sec);
        if(sec == 0){
          setTimeout(function(){
            alert("游戲結(jié)束，你的得分是" + score);
          },0)
          clearInterval(t);
        }
    },1000)
2018年9月14日 11:16
編輯回答
玩控
var sec = 10;
var t = setInterval(function(){
    sec--;
    if(sec == 0){
        alert("游戲結(jié)束，你的得分是" + score);
        clearInterval(t);
    }
    $(".time").html(sec);
},1000)

這樣呢？

2018年8月1日 13:19