Inspector: Add `debounce()`. (#33932)

examples/jsm/inspector/ui/Values.js

@@ -10,16 +10,20 @@ class Value extends EventDispatcher {
 		this.domElement.className = 'param-control';
 
 		this._onChangeFunction = null;
+		this._changeTimeout = null;
+		this._debounceTime = 0;
 
 		this.addEventListener( 'change', ( e ) => {
 
 			// defer to avoid issues when changing multiple values in the same call stack
 
-			requestAnimationFrame( () => {
+			clearTimeout( this._changeTimeout );
+
+			this._changeTimeout = setTimeout( () => {
 
 				if ( this._onChangeFunction ) this._onChangeFunction( e.value );
 
-			} );
+			}, this._debounceTime );
 
 		} );
 
@@ -53,6 +57,14 @@ class Value extends EventDispatcher {
 
 	}
 
+	debounce( time ) {
+
+		this._debounceTime = time;
+
+		return this;
+
+	}
+
 	show() {
 
 		this.dispatchEvent( { type: 'show' } );

examples/webgpu_lightprobes.html

@@ -212,14 +212,11 @@
 
 				} );
 
-				let rebakeTimer = null;
 				gui.add( params, 'resolution', 2, 12, 1 ).name( 'Resolution' ).onChange( ( value ) => {
 
-					// Debounce so a slider drag rebakes once it settles, not every step.
-					if ( rebakeTimer !== null ) clearTimeout( rebakeTimer );
-					rebakeTimer = setTimeout( () => bake( value ), 250 );
+					bake( value );
 
-				} );
+				} ).debounce( 250 );
 				gui.add( params, 'showProbes' ).name( 'Show Probes' ).onChange( ( value ) => {
 
 					probesHelper.visible = value;

examples/webgpu_lightprobes_complex.html

@@ -364,14 +364,11 @@
 
 				} );
 
-				let rebakeTimer = null;
 				gui.add( params, 'resolution', 2, 12, 1 ).name( 'Resolution' ).onChange( ( value ) => {
 
-					// Debounce so a slider drag rebakes once it settles, not every step.
-					if ( rebakeTimer !== null ) clearTimeout( rebakeTimer );
-					rebakeTimer = setTimeout( () => bake( value ), 250 );
+					bake( value );
 
-				} );
+				} ).debounce( 250 );
 				gui.add( params, 'showProbes' ).name( 'Show Probes' ).onChange( ( value ) => {
 
 					probesHelperLeft.visible = value;

examples/webgpu_postprocessing_ao.html

@@ -538,7 +538,7 @@
 
 				} );
 				const resolutionScaleControl = gui.add( params, 'resolutionScale', 0, 1 ).name( 'resolution' ).onChange( updateParameters );
-				gui.add( params, 'samples', 4, 32, 1 ).onChange( updateParameters );
+				gui.add( params, 'samples', 4, 32, 1 ).onChange( updateParameters ).debounce( 250 );
 				gui.add( params, 'radius', 0.1, 1 ).onChange( updateParameters );
 
 				const gtaoControls = [