JSFiddle - React, Tailwind, and code Playground

by sosegon

HTML

<button onclick="testClosure()">test closure</button>
<button onclick="testNoClosure()">test no closure</button>
<div>No Closure: <label id="no_closure"></label></div>
<div>With Closure: <label id="with_closure"></label></div>

JavaScript

var vector = new THREE.Vector3(100, 200, 300),
                start, end;
            var with_closure = document.getElementById("with_closure");
            var no_closure = document.getElementById("no_closure");
            var _closure = closure();

            function testClosure(){

                start = (new Date()).getTime();
                for(var i = 0; i < 1000000; i++){
                    _closure(vector);
                }
                end = (new Date()).getTime();

                with_closure.innerHTML = end-start + " ms";
            }

            function testNoClosure(){

                start = (new Date()).getTime();
                for(var i = 0; i < 1000000; i++){
                    noClosure(vector);
                }
                end = (new Date()).getTime();

                no_closure.innerHTML = end-start + " ms";
            }

            function noClosure(v){
                var v1 = new THREE.Vector3();
                return v.distanceTo(v1);
            }

            function closure(){

                var v1 = new THREE.Vector3();

                return function(v){
                    return v.distanceTo(v1);
                };
            }