HTML5(WebWorkers)

黑夜路口發表於2018-03-20
HTMLWeb
<!DOCTYPE html>
<html>
<body>
<!--<output> 標籤定義不同型別的輸出，比如指令碼的輸出。是 HTML 5 中的新標籤-->
<p>計數: <output id="result"></output></p>
<button onclick="startWorker()">開始 Worker</button>
<button onclick="stopWorker()">停止 Worker</button>
<br /><br />

<script>
    var w;

    function startWorker()
    {
        //檢測使用者的瀏覽器是否支援它
        if(typeof(Worker)!=="undefined")
        {
            if(typeof(w)=="undefined")
            {
                w=new Worker("js/worker.js");
            }
            //將even（事件）作為引數，就是這個“點選”事件，通過這個even，可以獲取到event.target,
            //onmessage在postMessage後執行
            w.onmessage = function (event) {
                //data屬性的返回值是任意型別，返回繫結當前事件處理函式時傳遞的附加資料。其型別取決於在繫結當前事件處理函式時所傳入的附加資料的型別。
                document.getElementById("result").innerHTML=event.data;//event.data得到的是postMessage引數傳遞的東西
            };
        }
        else
        {
            document.getElementById("result").innerHTML="Sorry, your browser does not support Web Workers...";
        }
    }

    function stopWorker()
    {
        w.terminate();
    }
</script>

</body>
</html>


/**
 * Created by renzhenming on 2018/3/12.
 */
var i=0;
//t=setTimeout(timedCount,1000)
//1000毫秒後執行timedCount函式，而timedCount函式裡面又有t=setTimeout(timedCount,1000)
//，然後就一直執行了
function timedCount()
{
    i=i+1;
    postMessage(i);
    setTimeout("timedCount()",500);
}

timedCount();


相關文章