add throttle to datazoom inside

src/component/dataZoom/DataZoomView.js

@@ -18,10 +18,7 @@ define(function (require) {
              */
             this._lastThrottleRate;
 
-            // FIXME
-            if (!this.__doNotThrottle) {
-                this._throttleDispatch(dataZoomModel);
-            }
+            this._throttleDispatch(dataZoomModel);
         },
 
         /**
@@ -31,13 +28,25 @@ define(function (require) {
             var originDispatchZoomAction = this.constructor.prototype.dispatchZoomAction;
             if (originDispatchZoomAction) {
                 var rate = dataZoomModel.get('throttle');
+
                 if (this._lastThrottleRate !== rate) {
+                    this._clearThrottle();
+
                     this.dispatchZoomAction = throttle.fixedRate(originDispatchZoomAction, rate);
                     this._lastThrottleRate = rate;
                 }
             }
         },
 
+        /**
+         * @private
+         */
+        _clearThrottle: function () {
+            // Dispose
+            var dispatchZoomAction = this.dispatchZoomAction;
+            dispatchZoomAction && dispatchZoomAction.clear && dispatchZoomAction.clear();
+        },
+
         /**
          * @protected
          */
@@ -45,6 +54,20 @@ define(function (require) {
             // Implement by Children Classes.
         },
 
+        /**
+         * @override
+         */
+        remove: function () {
+            this._clearThrottle();
+        },
+
+        /**
+         * @override
+         */
+        dispose: function () {
+            this._clearThrottle();
+        },
+
         /**
          * Find the first target coordinate system.
          *

src/component/dataZoom/InsideZoomView.js

@@ -11,18 +11,24 @@ define(function (require) {
 
         type: 'dataZoom.inside',
 
-        // FIXME
-        __doNotThrottle: true,
-
         /**
          * @override
          */
         init: function (ecModel, api) {
+
             /**
              * @private
              * @type {Object.<string, module:echarts/component/helper/RoamController>}
              */
             this._controllers = {};
+
+            /**
+             * 'throttle' is used in this.dispatchAction, so we save range
+             * to avoid missing some 'pan' info.
+             * @private
+             * @type {Array.<number>}
+             */
+            this._range;
         },
 
         /**
@@ -31,6 +37,13 @@ define(function (require) {
         render: function (dataZoomModel, ecModel, api, payload) {
             DataZoomView.prototype.render.apply(this, arguments);
 
+            // Notice: this._resetInterval() should not be executed when payload.type
+            // is 'dataZoom', origin this._range should be maintained, otherwise 'pan'
+            // or 'zoom' info will be missed because of 'throttle' of this.dispatchAction,
+            if (!payload || payload.type !== 'dataZoom' || payload.from !== this.uid) {
+                this._range = dataZoomModel.getRange();
+            }
+
             this._resetController(api);
         },
 
@@ -38,6 +51,8 @@ define(function (require) {
          * @override
          */
         remove: function () {
+            DataZoomView.prototype.remove.apply(this, arguments);
+
             var controllers = this._controllers;
             zrUtil.each(controllers, function (controller) {
                 controller.off('pan').off('zoom');
@@ -78,9 +93,8 @@ define(function (require) {
          * @private
          */
         _onPan: function (controller, coordInfo, dx, dy) {
-            var dataZoomModel = this.dataZoomModel;
-            var range = panCartesian(
-                [dx, dy], dataZoomModel.getRange(), controller, coordInfo
+            var range = this._range = panCartesian(
+                [dx, dy], this._range, controller, coordInfo
             );
 
             if (range) {
@@ -94,8 +108,8 @@ define(function (require) {
         _onZoom: function (controller, coordInfo, scale, mouseX, mouseY) {
             var dataZoomModel = this.dataZoomModel;
             scale = 1 / scale;
-            var range = scaleCartesian(
-                scale, [mouseX, mouseY], dataZoomModel.getRange(),
+            var range = this._range = scaleCartesian(
+                scale, [mouseX, mouseY], this._range,
                 controller, coordInfo, dataZoomModel
             );
 
@@ -111,7 +125,7 @@ define(function (require) {
                 type: 'dataZoom',
                 from: this.uid,
                 dataZoomId: this.dataZoomModel.id,
-                range: range
+                range: range.slice()
             });
         }
 

src/component/dataZoom/SliderZoomView.js

@@ -102,6 +102,9 @@ define(function (require) {
                 return;
             }
 
+            // Notice: this._resetInterval() should not be executed when payload.type
+            // is 'dataZoom', origin this._range should be maintained, otherwise 'pan'
+            // or 'zoom' info will be missed because of 'throttle' of this.dispatchAction,
             if (!payload || payload.type !== 'dataZoom' || payload.from !== this.uid) {
                 this._buildView();
             }

src/util/throttle.js

@@ -64,7 +64,7 @@ define(function () {
                 (isSingle ? fn : fn[index]).apply(scope, args || []);
             }
 
-            return function () {
+            var cb = function () {
                 currCall = (new Date()).getTime();
                 scope = this;
                 args = arguments;
@@ -91,6 +91,19 @@ define(function () {
 
                 lastCall = currCall;
             };
+
+            /**
+             * Clear throttle.
+             * @public
+             */
+            cb.clear = function () {
+                if (timer) {
+                    clearTimeout(timer);
+                    timer = null;
+                }
+            };
+
+            return cb;
         }
     };