Performance boost! Improve responsiveness by deferring chart updates.

toroid.html

@@ -763,25 +763,78 @@
                 updateChart();
             }
 
+            // Limit how often we update the chart, as it is quite a slow operation. But updating the graphic
+            // is very fast. So we update that with every event, but set a short timer for when we stop moving
+            // the slider.
+            const emphasis_delay = 40;
+            
+            var conductor_diameter_timer_handler = 0;
             conductor_diameter_slider.oninput = function() {
                 recalculate();
+                if(conductor_diameter_timer_handler == 0) {
+                    conductor_diameter_timer_handler = setTimeout(function(){
                         updateChart();
+                        conductor_diameter_timer_handler = 0;
+                    }, emphasis_delay);
+                } else {
+                    clearTimeout(conductor_diameter_timer_handler);
+                    conductor_diameter_timer_handler = setTimeout(function(){
+                        updateChart();
+                        conductor_diameter_timer_handler = 0;
+                    }, emphasis_delay);
+                }
             }
 
+            var loop_turns_timer_handler = 0;
             loop_turns_slider.oninput = function() {
                 recalculate();
+                if(loop_turns_timer_handler == 0) {
+                    loop_turns_timer_handler = setTimeout(function(){
                         updateChart();
+                        loop_turns_timer_handler = 0;
+                    }, emphasis_delay);
+                } else {
+                    clearTimeout(loop_turns_timer_handler);
+                    loop_turns_timer_handler = setTimeout(function(){
+                        updateChart();
+                        loop_turns_timer_handler = 0;
+                    }, emphasis_delay);
+                }
             }
 
+            var frequency_timer_handler = 0;
             frequency_slider.oninput = function() {
                 updateFrequencies();
                 recalculate();
+                if(frequency_timer_handler == 0) {
+                    frequency_timer_handler = setTimeout(function(){
                         updateChart();
+                        frequency_timer_handler = 0;
+                    }, emphasis_delay);
+                } else {
+                    clearTimeout(frequency_timer_handler);
+                    frequency_timer_handler = setTimeout(function(){
+                        updateChart();
+                        frequency_timer_handler = 0;
+                    }, emphasis_delay);
+                }
             }
 
+            var voltage_timer_handler = 0;
             voltage_slider.oninput = function() {
                 recalculate();
+                if(voltage_timer_handler == 0) {
+                    voltage_timer_handler = setTimeout(function(){
                         updateChart();
+                        voltage_timer_handler = 0;
+                    }, emphasis_delay);
+                } else {
+                    clearTimeout(voltage_timer_handler);
+                    voltage_timer_handler = setTimeout(function(){
+                        updateChart();
+                        voltage_timer_handler = 0;
+                    }, emphasis_delay);
+                }
             }
 
             window.onresize = function() {