62 lines
1.6 KiB
HTML
62 lines
1.6 KiB
HTML
|
<!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>
|