1. 程式人生 > >js定時器執行

js定時器執行

代碼塊 bsp 事件 scrip 不同 length 崩潰 閉包 所在

第一種:問題請求代表執行打印出來的是什麽?

       
       //定時器執行頁面崩潰
        var bo = true;
        setTimeout(function () {
            console.log("定時器執行");
            bo = false;
        }, 1000);
        while (bo) {
            console.log(bo);
        }
        console.log(bo);

分析:js為單線程執行,也到定時器會跳過定時器,執行後面代碼,待定時器事件到在執行定時器裏面函數。

上面代碼的情況,bo為true。頁面一直執行while,頁面卡死。

瀏覽器內核實現允許多個線程異步執行,這些線程在內核制控下相互配合以保持同步.假如某一瀏覽器內核的實現至少有三個常駐線 程:javascript引擎線程,界面渲染線程,瀏覽器事件觸發線程,除些以外,也有一些執行完就終止的線程,如Http請求線程,這些異步線程都會產 生不同的異步事件,下面通過一個圖來闡明單線程的JavaScript引擎與另外那些線程是怎樣互動通信的.雖然每個瀏覽器內核實現細節不同,但這其中的 調用原理都是大同小異.

第二種:最後輸出的結果是什麽?

        //for循環變量
        var
arr = [1,2,3,4]; for (var i = 0; i < arr.length; i++) { setTimeout(function () { console.log(arr[i]); },1000); } console.log(i);

結果為:underfind。

解析:最後執行到i為4,arr[4]超出數組。

解決方式:

方法一:

        //let 語句聲明一個塊級作用域的本地變量,並且可選的將其初始化為一個值。
        //在es6中新增了let命令聲明變量,用法和var類似,不過let所聲明的變量,只在let命令所在的代碼塊有效果,for循環的計數器中就很適合let命令
for (let i = 0; i < arr.length; i++) { setTimeout(function () { console.log(arr[i]); }, 1000); }

方法二:

        //加個閉包
        for (let i = 0; i < arr.length; i++) {
            (function (i) {
                setTimeout(function () {
                    console.log(arr[i]);
                }, 1000);
            })(i)
        }

js定時器執行