javascript 多线程Web Worker不引用外部js文件的方法

最近在Android开发中

Webview通过调用JavascriptInterface的方式与App交互

在交互的过程中,有些App上的操作时间会比较长,Web中调用的话会造成程序假死的情况

于是想到了如下几种方式来实现

1、js多线程(js正常情况下只支持单一线程,因此此方案被否决)

2、采用异步方式(此方案程序仍旧会假死)

3、采用Web Worker方式(此方案是HTML5中为支持多线程新出的一种方法)

此方案最终也被否决,是因为线程中无法使用alert和window等对象,同样就不能调用app中的JavascriptInterface

但由于方案不错,所以把实现方式贴出来,以备后飨。

  其中getScriptPath可以实现web worker不引用外部js的方法

JS代码:

function getScriptPath(foo) { return window.URL.createObjectURL(new Blob([foo.toString().match(/^\s*function\s*\(\s*\)\s*\{(([\s\S](?!\}$))*[\s\S])/)[1]], { type: 'text/javascript' })); }

    var worker = new Worker(getScriptPath(function () {
        self.addEventListener('message', function(e) {
        var value = 0;
        while(value <= e.data){
            self.postMessage(value);
            value++;
        }
    }, false);

    }));
    
    worker.addEventListener('message', function (e) {
        document.getElementById("result1").innerHTML = e.data;
    }, false);
    
    worker.postMessage(10000); 

HTML:

<div ></div>

最终采用Android的AsyncTask的方式来实现,详细代码就不描述

了解AsyncTask的方法就可以使用