Replaced Agent setInterval with throttle+memoize
Brian Vaughn committed
Apr 8, 2019 at 13:50 UTC
5db5e40bf19c53dc8a44765f45da751703ab460d
1 file changed
+11
-20
src/backend/agent.js
+11
-20
@@ -1,6 +1,8 @@
1
// @flow
2
3
import EventEmitter from 'events';
4
+import memoize from 'memoize-one';
5
+import throttle from 'lodash.throttle';
6
import { LOCAL_STORAGE_RELOAD_AND_PROFILE_KEY, __DEBUG__ } from '../constants';
7
import { hideOverlay, showOverlay } from './views/Highlighter';
8
@@ -49,9 +51,6 @@ export default class Agent extends EventEmitter {
51
_isProfiling: boolean = false;
52
_rendererInterfaces: { [key: RendererID]: RendererInterface } = {};
53
52
- _selectFiberInterval: null | IntervalID;
53
- _lastInspectedNode: null | HTMLElement;
54
-
54
constructor() {
55
super();
56
@@ -384,10 +383,6 @@ export default class Agent extends EventEmitter {
383
window.addEventListener('mousedown', this._onMouseDown, true);
384
window.addEventListener('mouseup', this._onMouseUp, true);
385
window.addEventListener('mouseover', this._onMouseOver, true);
387
- this._selectFiberInterval = setInterval(
388
- this._selectFiberForLastInspectedNode,
389
- 200
390
- );
386
};
387
388
startProfiling = () => {
@@ -408,11 +403,6 @@ export default class Agent extends EventEmitter {
403
window.removeEventListener('mousedown', this._onMouseDown, true);
404
window.removeEventListener('mouseup', this._onMouseUp, true);
405
window.removeEventListener('mouseover', this._onMouseOver, true);
411
-
412
- this._selectFiberForLastInspectedNode();
413
- clearInterval(this._selectFiberInterval);
414
- this._selectFiberInterval = null;
415
- this._lastInspectedNode = null;
406
};
407
408
stopProfiling = () => {
@@ -475,8 +465,7 @@ export default class Agent extends EventEmitter {
465
event.preventDefault();
466
event.stopPropagation();
467
478
- const target = ((event.target: any): HTMLElement);
479
- this._lastInspectedNode = target;
468
+ this._selectFiberForNode(((event.target: any): HTMLElement));
469
};
470
471
// While we don't do anything here, this makes choosing
@@ -492,19 +481,21 @@ export default class Agent extends EventEmitter {
481
event.stopPropagation();
482
483
const target = ((event.target: any): HTMLElement);
484
+
485
// Don't pass the name explicitly.
486
// It will be inferred from DOM tag and Fiber owner.
487
showOverlay(target, null, false);
498
- this._lastInspectedNode = target;
488
+
489
+ this._selectFiberForNode(target);
490
};
491
501
- _selectFiberForLastInspectedNode = () => {
502
- const node = this._lastInspectedNode;
503
- if (node !== null) {
492
+ _selectFiberForNode = throttle(
493
+ memoize((node: HTMLElement) => {
494
const id = this.getIDForNode(node);
495
if (id !== null) {
496
this._bridge.send('selectFiber', id);
497
}
508
- }
509
- };
498
+ }),
499
+ 200
500
+ );
501
}