From e6d7edd130249bac0b6ebb3d36668224bc7753ab Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EF=BC=A8=EF=BD=8F=EF=BD=8E=EF=BD=87=EF=BD=81=EF=BD=92?= =?UTF-8?q?=EF=BD=83?= Date: Wed, 5 Dec 2018 12:08:41 +0700 Subject: [PATCH 1/2] Create simple debounce and throttle instead of _. --- src/js/util/debounce.js | 17 +++++++++++++++++ src/js/util/throttle.js | 13 +++++++++++++ src/js/views/builderViews.js | 3 ++- src/js/views/index.js | 6 ++++-- src/js/views/levelDropdownView.js | 3 ++- src/js/views/multiView.js | 6 +++--- src/js/visuals/index.js | 3 ++- 7 files changed, 43 insertions(+), 8 deletions(-) create mode 100644 src/js/util/debounce.js create mode 100644 src/js/util/throttle.js diff --git a/src/js/util/debounce.js b/src/js/util/debounce.js new file mode 100644 index 00000000..0f8bd3b4 --- /dev/null +++ b/src/js/util/debounce.js @@ -0,0 +1,17 @@ +module.exports = function(func, time, immediate) { + var timeout; + return function() { + var later = function() { + timeout = null; + if (!immediate) { + func.apply(this, arguments); + } + }; + var callNow = immediate && !timeout; + clearTimeout(timeout); + timeout = setTimeout(later, time); + if (callNow) { + func.apply(this, arguments); + } + }; + }; diff --git a/src/js/util/throttle.js b/src/js/util/throttle.js new file mode 100644 index 00000000..45d85e72 --- /dev/null +++ b/src/js/util/throttle.js @@ -0,0 +1,13 @@ +module.exports = function(func, time) { + var wait = false; + return function() { + if (!wait) { + func.apply(this, arguments); + wait = true; + + setTimeout(function() { + wait = false; + }, time); + } + }; + }; diff --git a/src/js/views/builderViews.js b/src/js/views/builderViews.js index 89a6f8b9..592e1975 100644 --- a/src/js/views/builderViews.js +++ b/src/js/views/builderViews.js @@ -2,6 +2,7 @@ var _ = require('underscore'); var Q = require('q'); var Views = require('../views'); +var throttle = require('../util/throttle'); var ModalTerminal = Views.ModalTerminal; var ContainedBase = Views.ContainedBase; @@ -97,7 +98,7 @@ var MarkdownGrabber = ContainedBase.extend({ keyup: function() { if (!this.throttledPreview) { - this.throttledPreview = _.throttle( + this.throttledPreview = throttle( this.updatePreview.bind(this), 500 ); diff --git a/src/js/views/index.js b/src/js/views/index.js index 6f09413b..3fa26ce6 100644 --- a/src/js/views/index.js +++ b/src/js/views/index.js @@ -7,6 +7,8 @@ var intl = require('../intl'); var log = require('../log'); var Constants = require('../util/constants'); var KeyboardListener = require('../util/keyboard').KeyboardListener; +var debounce = require('../util/debounce'); +var throttle = require('../util/throttle'); var BaseView = Backbone.View.extend({ getDestination: function() { @@ -106,7 +108,7 @@ var GeneralButton = ContainedBase.extend({ click: function() { if (!this.clickFunc) { - this.clickFunc = _.throttle( + this.clickFunc = throttle( this.sendClick.bind(this), 500 ); @@ -580,7 +582,7 @@ var CanvasTerminalHolder = BaseView.extend({ // If the entire window gets resized such that the terminal is outside the view, then // move it back into the view, and expand/shrink it vertically as necessary. - $(window).on('resize', _.debounce(this.recalcLayout.bind(this), 300)); + $(window).on('resize', debounce(this.recalcLayout.bind(this), 300)); if (options.additionalClass) { this.$el.addClass(options.additionalClass); diff --git a/src/js/views/levelDropdownView.js b/src/js/views/levelDropdownView.js index faf95b33..a5e9adbe 100644 --- a/src/js/views/levelDropdownView.js +++ b/src/js/views/levelDropdownView.js @@ -4,6 +4,7 @@ var Backbone = require('backbone'); var LocaleStore = require('../stores/LocaleStore'); var util = require('../util'); +var debounce = require('../util/debounce'); var intl = require('../intl'); var log = require('../log'); var KeyboardListener = require('../util/keyboard').KeyboardListener; @@ -41,7 +42,7 @@ var LevelDropdownView = ContainedBase.extend({ }; this.navEvents = Object.assign({}, Backbone.Events); - this.navEvents.on('clickedID', _.debounce( + this.navEvents.on('clickedID', debounce( this.loadLevelID.bind(this), 300, true diff --git a/src/js/views/multiView.js b/src/js/views/multiView.js index 9a3981ae..7d44a39a 100644 --- a/src/js/views/multiView.js +++ b/src/js/views/multiView.js @@ -1,4 +1,3 @@ -var _ = require('underscore'); var Q = require('q'); var Backbone = require('backbone'); @@ -10,6 +9,7 @@ var BuilderViews = require('../views/builderViews'); var MarkdownPresenter = BuilderViews.MarkdownPresenter; var KeyboardListener = require('../util/keyboard').KeyboardListener; +var debounce = require('../util/debounce'); var MultiView = Backbone.View.extend({ tagName: 'div', @@ -84,13 +84,13 @@ var MultiView = Backbone.View.extend({ }, getPosFunc: function() { - return _.debounce(function() { + return debounce(function() { this.navForward(); }.bind(this), this.navEventDebounce, true); }, getNegFunc: function() { - return _.debounce(function() { + return debounce(function() { this.navBackward(); }.bind(this), this.navEventDebounce, true); }, diff --git a/src/js/visuals/index.js b/src/js/visuals/index.js index 80d2d806..9029c2d5 100644 --- a/src/js/visuals/index.js +++ b/src/js/visuals/index.js @@ -3,6 +3,7 @@ var Q = require('q'); var intl = require('../intl'); var GRAPHICS = require('../util/constants').GRAPHICS; +var debounce = require('../util/debounce'); var GlobalStateStore = require('../stores/GlobalStateStore'); var VisNode = require('../visuals/visNode').VisNode; @@ -795,7 +796,7 @@ GitVisuals.prototype.canvasResize = function(width, height) { }; GitVisuals.prototype.genResizeFunc = function() { - this.resizeFunc = _.debounce( + this.resizeFunc = debounce( function(width, height) { this.refreshTree(); }.bind(this), From 70b7a72bd7f7d7ff7bcb5c7aead45e69d8ae8398 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EF=BC=A8=EF=BD=8F=EF=BD=8E=EF=BD=87=EF=BD=81=EF=BD=92?= =?UTF-8?q?=EF=BD=83?= Date: Wed, 5 Dec 2018 12:18:35 +0700 Subject: [PATCH 2/2] Use Object.values instead of _.each : 96ddb50 --- src/js/visuals/index.js | 19 +++++++++---------- 1 file changed, 9 insertions(+), 10 deletions(-) diff --git a/src/js/visuals/index.js b/src/js/visuals/index.js index 9029c2d5..31afd596 100644 --- a/src/js/visuals/index.js +++ b/src/js/visuals/index.js @@ -1,4 +1,3 @@ -var _ = require('underscore'); var Q = require('q'); var intl = require('../intl'); @@ -83,7 +82,7 @@ GitVisuals.prototype.resetAll = function() { visTag.remove(); }, this); - _.each(this.visNodeMap, function(visNode) { + Object.values(this.visNodeMap).forEach(function(visNode) { visNode.remove(); }, this); @@ -207,7 +206,7 @@ GitVisuals.prototype.animateAllAttrKeys = function(keys, attr, speed, easing) { this.visBranchCollection.each(animate); this.visEdgeCollection.each(animate); this.visTagCollection.each(animate); - _.each(this.visNodeMap, animate); + Object.values(this.visNodeMap).forEach(animate); var time = (speed !== undefined) ? speed : GRAPHICS.defaultAnimationTime; setTimeout(function() { @@ -322,7 +321,7 @@ GitVisuals.prototype.finishAnimation = function(speed) { GitVisuals.prototype.explodeNodes = function(speed) { var deferred = Q.defer(); var funcs = []; - _.each(this.visNodeMap, function(visNode) { + Object.values(this.visNodeMap).forEach(function(visNode) { funcs.push(visNode.getExplodeStepFunc(speed)); }); @@ -369,7 +368,7 @@ GitVisuals.prototype.animateAllFromAttrToAttr = function(fromSnapshot, toSnapsho this.visBranchCollection.each(animate); this.visEdgeCollection.each(animate); this.visTagCollection.each(animate); - _.each(this.visNodeMap, animate); + Object.values(this.visNodeMap).forEach(animate); }; /*************************************** @@ -393,7 +392,7 @@ GitVisuals.prototype.genSnapshot = function() { this.fullCalc(); var snapshot = {}; - _.each(this.visNodeMap, function(visNode) { + Object.values(this.visNodeMap).forEach(function(visNode) { snapshot[visNode.get('id')] = visNode.getAttributes(); }, this); @@ -633,7 +632,7 @@ GitVisuals.prototype.calcDepth = function() { } var depthIncrement = this.getDepthIncrement(maxDepth); - _.each(this.visNodeMap, function(visNode) { + Object.values(this.visNodeMap).forEach(function(visNode) { visNode.setDepthBasedOn(depthIncrement, this.getHeaderOffset()); }, this); }; @@ -656,7 +655,7 @@ GitVisuals.prototype.calcDepth = function() { **************************************/ GitVisuals.prototype.animateNodePositions = function(speed) { - _.each(this.visNodeMap, function(visNode) { + Object.values(this.visNodeMap).forEach(function(visNode) { visNode.animateUpdatedPosition(speed); }, this); }; @@ -854,7 +853,7 @@ GitVisuals.prototype.zIndexReflow = function() { }; GitVisuals.prototype.visNodesFront = function() { - _.each(this.visNodeMap, function(visNode) { + Object.values(this.visNodeMap).forEach(function(visNode) { visNode.toFront(); }); }; @@ -893,7 +892,7 @@ GitVisuals.prototype.drawTreeFirstTime = function() { this.gitReady = true; this.calcTreeCoords(); - _.each(this.visNodeMap, function(visNode) { + Object.values(this.visNodeMap).forEach(function(visNode) { visNode.genGraphics(this.paper); }, this);