H5のためにマルチスレッドを使用するための新しい理解と簡単な

JavaScriptがシングルスレッドJavaScript言語の特性を決定するので言語ですが、時には我々はそのようなコンピューティング多くの時間として、複数のスレッドを使用する必要があります。H5、この目的のためにマルチスレッド追加されます。

ここで私は、有名な飛ボラと列の数を達成するためにJavaScriptを使用しています、と私は、入力ボックスに数字その位置、最初の桁の数値に戻ったとき。

メインスレッドとスレッドのポイント間の関係：

使用中のマルチスレッドではない1、
HTMLを

<input type="text" placeholder="数值" id="number">
<button id="btn">计算</button>

JavaScriptを

// 1 1 2 3 5 8  ....   f(n) = f(n-1) + f(n-2)
    function fibonacci (n) {
        return n<=2 ? 1 : fibonacci(n-1) + fibonacci(n-2)  //递归调用
    }
    var input = document.getElementById('number')
    document.getElementById('btn').onclick = function () {
        var number = input.value
        var result = fibonacci(number)
        alert(result)
    }

我々が原因再帰呼び出しに、大きな値を入力し、マルチスレッドを使用せずに計算集約的であり、唯一のインタフェースできる計算ユーザーの完了を待つことができます動作不能状態のページになります

2、新たなマルチスレッド方式H5を用いて

var input = document.getElementById('number')
    document.getElementById('btn').onclick = function () {
        var number = input.value

        //创建一个worker对象
        var worker = new Worker('worker.js')
        //绑定接受消息的监听
        worker.onmessage = function (event) {
            console.log('主线程接受分线程返回的数据：'+event.data)
            alert(event.data)
        }

        //向分线程worker.js发送消息
        worker.postMessage(number)
        console.log('主线程向分线程发送数据：'+number)
    }

サブスレッドworker.js

function fibonacci(n) {
    return n<=2 ? 1 : fibonacci(n-1) + fibonacci(n-2)
}

var onmessage = function (event) {
    var number = event.data
    console.log('分线程接收到了主线程发送的数据：'+number)
    //计算
    var result = fibonacci(number)
    postMessage(result)
    console.log('分线程向主线程返回数据：'+result)
}

ユーザは分数スレッドによってページにユーザが操作できるように、影響を受けない主サブスレッドのスレッド（ブロック変更入力操作）を計算する、大きな値を入力すると、それを実現することができます。

マルチスレッドの欠点：

まだすべてのブラウザでサポートされていません。
コード内のサブスレッド（worker.js）はDOM（サブスレッドグローバルオブジェクト理由はないWindowsの場合）上で動作させることができません。
クロスドメインのロードJSことはできません。
メインスレッドとスレッドが遅い分の間でデータの交換に起因します。

マルチスレッドは、ローカルで実行choremブラウザを訴えるため、テスト・アクセス・パスの形でlocalhostを使用します

H5のためにマルチスレッドを使用するための新しい理解と簡単な

ここで私は、有名な飛ボラと列の数を達成するためにJavaScriptを使用しています、と私は、入力ボックスに数字その位置、最初の桁の数値に戻ったとき。

おすすめ