DLynch has uploaded a new change for review.
https://gerrit.wikimedia.org/r/273938
Change subject: Use throttle instead of debounce for find/replace rendering
......................................................................
Use throttle instead of debounce for find/replace rendering
Debounce means that results don't update at all until we stop scrolling, which
looks a bit jerky. Throttle means that we can occasionally redraw the results
while we scroll.
Change-Id: Icad3a0eaff5abb6e1198bf0746002576a0600a7c
---
M src/ui/dialogs/ve.ui.FindAndReplaceDialog.js
M src/ve.utils.js
2 files changed, 63 insertions(+), 8 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/VisualEditor/VisualEditor
refs/changes/38/273938/1
diff --git a/src/ui/dialogs/ve.ui.FindAndReplaceDialog.js
b/src/ui/dialogs/ve.ui.FindAndReplaceDialog.js
index de2b0a1..3749a52 100644
--- a/src/ui/dialogs/ve.ui.FindAndReplaceDialog.js
+++ b/src/ui/dialogs/ve.ui.FindAndReplaceDialog.js
@@ -136,9 +136,9 @@
$replaceRow = $( '<div>' ).addClass( 've-ui-findAndReplaceDialog-row' );
// Events
- this.onWindowScrollDebounced = ve.debounce( this.onWindowScroll.bind(
this ), 250 );
- this.updateFragmentsDebounced = ve.debounce( this.updateFragments.bind(
this ) );
- this.renderFragmentsDebounced = ve.debounce( this.renderFragments.bind(
this ), 250 );
+ this.onWindowScrollThrottled = ve.throttle( this.onWindowScroll.bind(
this ), 250, { trailing: true } );
+ this.updateFragmentsThrottled = ve.throttle( this.updateFragments.bind(
this ), 250, { trailing: true } );
+ this.renderFragmentsThrottled = ve.throttle( this.renderFragments.bind(
this ), 250, { trailing: true } );
this.findText.connect( this, {
change: 'onFindChange',
enter: 'onFindReplaceTextEnter'
@@ -192,7 +192,7 @@
// Events
this.surface.getModel().connect( this, {
documentUpdate: 'onSurfaceModelDocumentUpdate' } );
this.surface.getView().connect( this, { position:
'onSurfaceViewPosition' } );
- this.surface.getView().$window.on( 'scroll',
this.onWindowScrollDebounced );
+ this.surface.getView().$window.on( 'scroll',
this.onWindowScrollThrottled );
}, this );
};
@@ -219,7 +219,7 @@
// Events
this.surface.getModel().disconnect( this );
surfaceView.disconnect( this );
- this.surface.getView().$window.off( 'scroll',
this.onWindowScrollDebounced );
+ this.surface.getView().$window.off( 'scroll',
this.onWindowScrollThrottled );
// If the surface isn't selected, put the selection
back in a sensible place
if ( surfaceModel.getSelection() instanceof
ve.dm.NullSelection ) {
@@ -252,7 +252,7 @@
return;
}
this.clearRenderedResultsCache();
- this.updateFragmentsDebounced();
+ this.updateFragmentsThrottled();
};
/**
@@ -263,7 +263,7 @@
return;
}
this.clearRenderedResultsCache();
- this.renderFragmentsDebounced();
+ this.renderFragmentsThrottled();
};
/**
@@ -595,7 +595,7 @@
var dialog = this,
replace = this.replaceText.getValue();
- // Prevent replace from triggering debounced redraws
+ // Prevent replace from triggering throttled redraws
this.replacing = true;
if ( this.query instanceof RegExp ) {
diff --git a/src/ve.utils.js b/src/ve.utils.js
index 486cfea..e3f0eb1 100644
--- a/src/ve.utils.js
+++ b/src/ve.utils.js
@@ -75,6 +75,61 @@
ve.debounce = OO.ui.debounce;
/**
+ * Returns a function, that, when invoked, will only be triggered at most once
+ * during a given window of time. Normally, the throttled function will run as
+ * much as it can, without ever going more than once per `wait` duration; but
if
+ * you’d like to disable the execution on the leading edge, pass `{leading:
+ * false}`. To disable execution on the trailing edge, ditto.
+ *
+ * Ported from: http://underscorejs.org/underscore.js
+ *
+ * @param {Function} func
+ * @param {number} wait
+ * @param {Object} options
+ * @param {boolean} options.leading whether to immediately run
+ * @param {boolean} options.trailing whether to run one last time after calls
end
+ * @return {Function}
+ */
+ve.throttle = function ( func, wait, options ) {
+ var context, args, result,
+ timeout = null,
+ previous = 0,
+ later = function () {
+ previous = options.leading === false ? 0 : ve.now();
+ timeout = null;
+ result = func.apply( context, args );
+ if ( !timeout ) {
+ context = args = null;
+ }
+ };
+ options = options || {};
+ return function () {
+ var remaining,
+ now = ve.now();
+ if ( !previous && options.leading === false ) {
+ previous = now;
+ }
+ remaining = wait - ( now - previous );
+ context = this;
+ args = arguments;
+ if ( remaining <= 0 || remaining > wait ) {
+ if ( timeout ) {
+ clearTimeout( timeout );
+ timeout = null;
+ }
+ previous = now;
+ result = func.apply( context, args );
+ if ( !timeout ) {
+ context = args = null;
+ }
+ } else if ( !timeout && options.trailing !== false ) {
+ timeout = setTimeout( later, remaining );
+ }
+ return result;
+ };
+};
+
+/**
* @method
* @inheritdoc OO.ui.Element#scrollIntoView
*/
--
To view, visit https://gerrit.wikimedia.org/r/273938
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: Icad3a0eaff5abb6e1198bf0746002576a0600a7c
Gerrit-PatchSet: 1
Gerrit-Project: VisualEditor/VisualEditor
Gerrit-Branch: master
Gerrit-Owner: DLynch <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
