Home > Developer > Web Develop
1. Implemented with Web-worker: Another thread that will count the work running in the background of the JavaScript file and return the cumulative result.
The JS file runs in the background, independent of other scripts, and does not affect the performance of the page. HTML pages can continue to do anything, while the Web worker runs in the background without interfering.
An error occurred while debugging with Chrome:
Uncaught securityerror:failed to construct ' Worker ': Script @ ' file:///users/***/desktop/myworker.js ' cannot be Accesse D from Origin ' null '.
The reason: "Chrome doesn t let you load the Web workers when running scripts from a local file. Note:firefox won ' t work either. Try Safari. ”；
Attached link: http://stackoverflow.com/questions/21408510/chrome-cant-load-web-worker
2. According to the user input time interval to count, such as input 1000, then every second count;
3.test.html uses PostMessage to send messages to Myworkers.js, and uses OnMessage method to collect messages;
Myworkers.js uses PostMessage to send messages to test.html, but through Self.addeventlistener (' message ', function (e) {}), to capture the message event, Gets the message sent by the test.html. Typically we use Window.addeventlistener (' message ', function (e) {}) to add a message event, but web worker does not support window object (http:// Stackoverflow.com/questions/11219775/global-variable-in-web-worker), so can only use self;
The Test.html page is as follows:
<HTML><Scripttype= "Text/javascript"> varMyworker; varI= Ten; Myworker= NewWorker ("./myworker.js"); Myworker.onmessage= function(event) {document.getElementById ("result"). InnerHTML=Event.data; } functionCountstart () {varvalue=document.getElementById ("TextInput"). Value; Myworker.postmessage ({"moustevent":1,"TextInput": Value});//1 Start Count } functionCountstop () {myworker.postmessage ({"moustevent":0}); }</Script><styletype= "Text/css">. Counttime{width:100px;Height:100px;Background-color:Blue; }</style><Body> <P>Count numbers:<OutputID= "Result"></Output></P> <Divclass= "Counttime"ID= "Counttime"onmouseover= "Countstart ()"onmouseout= "Countstop ()"></Div> <P>Please Input Interval time:</P> <inputID= "TextInput"type= "Number" ></input></Body></HTML>
Attention:
If you want to post multiple parameters, you can consider post a JSON past;
Myworker.js
var i = 1;var pid = 0;var tmp;function counttime () { i+=1; PostMessage (i); };/ /add event Listener to handle the different Messageself.addeventlistener (' message ', function (e) { //if message = = 1 Start count tmp = e.data["TextInput"]; if (1 = = e.data["Moustevent") { <= 0= ; TMP) ; } 0 Stop Count else{ clearinterval (PID);} );Attention:
To Clearinterval must have an ID indicating the logoff of that interval, so the definition is PID = setinterval (Counttime, TMP);
Clearinterval (PID) at logoff;
：
1. Click on the Blue box to start the timer;
2. The input box is 600, then every 600 milliseconds counter plus one, otherwise, the default is 1000 milliseconds;
3. Mouse removal, stop counting;
Web-worker counter, according to the number of input time statistics
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
