feat: add browser example

nytamin · Feb 1, 2019 · ccd2ff7 · ccd2ff7
1 parent 9594b46
commit ccd2ff7
Show file tree

Hide file tree

Showing 3 changed files with 142 additions and 0 deletions.
diff --git a/examples/browser/browser.html b/examples/browser/browser.html
@@ -0,0 +1,76 @@
+<html>
+<head>
+
+	<script type="text/javascript" src="../../dist/js/threadedClass.js"></script>
+	<!-- <script type="text/javascript" src="threadedClass.js"></script> -->
+	<script type="text/javascript" src="myClass.js"></script>
+	<script type="text/javascript">
+		var threadedClass = ThreadedClass.threadedClass
+
+		var startTime = 0
+		function log (str) {
+			if (str) {
+				var obj = document.getElementById("console")
+				obj.innerText += (Date.now() - startTime) + 'ms ' + str.toString() + '\n'
+			}
+		}
+		function wait(value) {
+			return new Promise((resolve) => setTimeout(() => {resolve(value)}, 1))
+		}
+		function runThreads (threaded) {
+			startTime = Date.now()
+			log('====================================================')
+			if (threaded) {
+				log('Starting in threaded mode...')
+			} else {
+				log('Starting in non-threaded-mode...')
+			}
+
+			var parallell = 10
+
+			var promises = []
+
+			for (var i = 0; i < parallell; i++) {
+				promises.push(doTask(i, threaded))
+			}
+			Promise.all(promises)
+			.then(() => {
+				log('All tasks are done!')
+			})
+		}
+		function doTask (i, threaded) {
+			log(`Creating class ${i}...`)
+			return Promise.resolve(
+				threaded ?
+				// Create a threaded variant of the class:
+				threadedClass('/examples/browser/myClass.js', MyClass, [], {
+					pathToWorker: '../../dist/js/threadedClass-worker.js'
+				}) :
+				new MyClass()
+			)
+			.then(wait)
+			.then((myClass) => {
+				log(`Starting task ${i}...`)
+				return myClass.doSomethingSlow()
+			})
+			.then(wait)
+			.then(() => {
+				log(`Task ${i} done`)
+			})
+
+
+		}
+	</script>
+</head>
+<body>
+	<div>
+		<button onclick="runThreads(false)">Click to run in single thread</button>
+		<button onclick="runThreads(true)">Click to run in multi thread</button>
+	</div>
+	<div id="console" style="border: 1px solid grey; font-family: 'Courier New', Courier, monospace; white-space: pre;"></div>
+
+	<script type="text/javascript">
+		runThreads(true)
+	</script>
+</body>
+</html>
diff --git a/examples/browser/main.js b/examples/browser/main.js
@@ -0,0 +1,50 @@
+var threadedClass = require('./threadedclass')
+
+var startTime = 0
+function log (str) {
+    if (str) {
+        var obj = document.getElementById("console")
+        obj.innerText += (Date.now() - startTime) + 'ms ' + str.toString() + '\n'
+    }
+}
+function runThreads (threaded) {
+    startTime = Date.now()
+    if (threaded) {
+        log('Starting in threaded mode...')
+    } else {
+        log('Starting in non-threaded-mode...')
+    }
+
+    var parallell = 10
+
+    var promises = []
+
+    for (var i = 0; i < parallell; i++) {
+        promises.push(doTask(i, threaded))
+    }
+    Promise.all(promises)
+    .then(() => {
+        log('All tasks are done!')
+    })
+}
+function doTask (i, threaded) {
+
+    return new Promise((resolve, reject) => {
+
+        log(`Creating class ${i}...`)
+
+        Promise.resolve(
+            threaded ?
+            threadedClass('./myClass.js', MyClass, []) :
+            new MyClass()
+        )
+        .then((myClass) => {
+            log(`Starting task ${i}...`)
+            return myClass.doSomethingSlow()
+        })
+        .then(() => {
+            log(`Task ${i} done`)
+        })
+
+    })
+}
diff --git a/examples/browser/myClass.js b/examples/browser/myClass.js
@@ -0,0 +1,16 @@
+console.log('__MyClass__')
+class MyClass {
+    doSomethingSlow () {
+        this._fib(37)
+    }
+    /** Calculate fibbonacci number, takes a long time */
+    _fib (num) {
+        let result = 0
+        if (num < 2) {
+            result = num
+        } else {
+            result = this._fib(num - 1) + this._fib(num - 2)
+        }
+        return result
+    }
+}