鍍金池/ 問答/數(shù)據(jù)庫(kù)  網(wǎng)絡(luò)安全  HTML/ 在一個(gè)function內(nèi)，添加多個(gè)事件偵聽

在一個(gè)function內(nèi)，添加多個(gè)事件偵聽

最近遇到個(gè)問題，需要在JS的一個(gè)function內(nèi)，在不同的代碼執(zhí)行階段，更新UI。
做了各種嘗試，包括web worker技術(shù)，由于種種原因，感覺還是事件偵聽離實(shí)現(xiàn)更近一些。
具體到以下代碼，想實(shí)現(xiàn)的效果是：
點(diǎn)擊“開始”按鈕之后，開始執(zhí)行 mousedown function（），
在function（）一開始，發(fā)出一個(gè)event_start事件，表示開始，
接著進(jìn)行2次長(zhǎng)時(shí)間的計(jì)算，從i=0,增加到i=20000,不停地向console輸出i的值，
在每次計(jì)算結(jié)束之后，再發(fā)出一個(gè) event_done_X 事件,比如第1次計(jì)算完成就發(fā)出event_done_1事件
第2次計(jì)算完成發(fā)出event_done_2事件，

我期待的結(jié)果是，每次發(fā)出事件，不論是event_start,event_done_1還是event_done_2，
inputbox的值都會(huì)立即作出改變，

但實(shí)現(xiàn)情況是，只有event_done_2發(fā)出的時(shí)候，inputbox的值才作出了改變。

如何才能得到正確的結(jié)果？

（下面的JS代碼引入了jquery,使用了jquery技術(shù)）

<html>
<head>
    <meta http-equiv='Pragma' content='no-cache'/>
    <meta http-equiv='content-type' content='text/html' charset=UTF-8 >
    <script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<label>For循環(huán)更新UI測(cè)試</label><br>
<input type="text" id="msg" value="" readonly style="width: 300px"><br>
<button type="button" id="for_st" >開始</button>
<script>
        $(document).ready(function () {
            document.addEventListener("st",function(e){
                $("#msg").val("發(fā)生了event_start事件");
            });

            document.addEventListener("d1",function(e){
                $("#msg").val("發(fā)生了event_done_1事件");
            });

            document.addEventListener("d2",function(e){
                $("#msg").val("發(fā)生了event_done_2事件");
            })
        })


        $(document).on("mousedown","#for_st",function () {

            var event_start = new Event("st");
            document.dispatchEvent(event_start);

            for(var i = 0 ; i < 20000 ; i ++){
                console.log(i);
            }
            
            var event_done_1 = new Event("d1");
            document.dispatchEvent(event_done_1);


            for(var i = 0 ; i < 20000 ; i ++){
                console.log(i);
            }

            var event_done_1 = new Event("d2");
            document.dispatchEvent(event_done_1);

        });

</script>
</body>
</html>
回答
編輯回答
心上人

clipboard.png

其實(shí)你的代碼寫法是沒錯(cuò)的，我猜因?yàn)閖s是單線程的，你后續(xù)代碼的執(zhí)行阻塞了前面兩個(gè)事件對(duì)input的更新，最終導(dǎo)致你只能看到最后一次的結(jié)果

2017年12月23日 22:31