| <!DOCTYPE html> |
| <html> |
| <head> |
| <title>Worker pool in the browser</title> |
| <style> |
| body { |
| width: 600px; |
| font: 11pt arial; |
| } |
| </style> |
| |
| <script src="../../dist/workerpool.js"></script> |
| </head> |
| <body> |
| |
| Calculate fibonacci: |
| <input type="text" id="input" value="10" /> |
| <input type="button" id="calculate" value="Calculate"> |
| |
| <p> |
| Try entering values in the range of 10 to 50. |
| Verify that the browser stays responsive when working on a large calculation. |
| We have created 3 workers, so the worker pool will handle a maximum of three |
| tasks at a time. When exceeding this, tasks will be put in a queue. |
| </p> |
| |
| <div id="results"></div> |
| |
| <script> |
| // create a worker pool using an external worker script |
| var pool = workerpool.pool('../workers/crossWorker.js', {maxWorkers: 3}); |
| |
| var input = document.getElementById('input'); |
| var calculate = document.getElementById('calculate'); |
| var results = document.getElementById('results'); |
| |
| calculate.onclick = function () { |
| var n = parseInt(input.value); |
| var result = document.createElement('div'); |
| result.innerHTML = 'fibonacci(' + n + ') = ... '; |
| results.appendChild(result); |
| |
| var promise = pool.exec('fibonacci', [n]) |
| .then(function (f) { |
| result.innerHTML = 'fibonacci(' + n + ') = ' + f; |
| }) |
| .catch(function (error) { |
| result.innerHTML = 'fibonacci(' + n + ') = ' + error; |
| }); |
| |
| var a = document.createElement('A'); |
| a.innerHTML = 'cancel'; |
| a.href = '#'; |
| a.onclick = function () { |
| promise.cancel(); |
| }; |
| result.appendChild(a); |
| }; |
| </script> |
| |
| </body> |
| </html> |
