chore: small changes

doc/UTIL_API.md

@@ -1038,6 +1038,21 @@ dateFormat('yyyy-mm-dd HH:MM:ss'); // -> 2016-11-19 19:00:04
 dateFormat(new Date(), 'yyyy-mm-dd'); // -> 2016-11-19
 ```
 
+## debounce 
+
+Return a new debounced version of the passed function.
+
+|Name  |Type    |Desc                           |
+|------|--------|-------------------------------|
+|fn    |function|Function to debounce           |
+|wait  |number  |Number of milliseconds to delay|
+|return|function|New debounced function         |
+
+```javascript
+const calLayout = debounce(function () {}, 300);
+// $(window).resize(calLayout);
+```
+
 ## decodeUriComponent 
 
 Better decodeURIComponent that does not throw if input is invalid.
@@ -2412,6 +2427,21 @@ Strip html tags from a string.
 stripHtmlTag('<p>Hello</p>'); // -> 'Hello'
 ```
 
+## throttle 
+
+Return a new throttled version of the passed function.
+
+|Name  |Type    |Desc                           |
+|------|--------|-------------------------------|
+|fn    |function|Function to throttle           |
+|wait  |number  |Number of milliseconds to delay|
+|return|function|New throttled function         |
+
+```javascript
+const updatePos = throttle(function () {}, 100);
+// $(window).scroll(updatePos);
+```
+
 ## toArr 
 
 Convert value to an array.

src/DevTools/DevTools.js

@@ -13,7 +13,8 @@ import {
   each,
   isNum,
   safeStorage,
-  $
+  $,
+  throttle
 } from '../lib/util'
 
 export default class DevTools extends Emitter {
@@ -243,6 +244,10 @@ export default class DevTools extends Emitter {
         $navBar.css('filter', 'brightness(1.2)')
       }, 1000)
     }
+    const setDisplaySize = throttle(
+      size => this.config.set('displaySize', size),
+      50
+    )
     const moveListener = e => {
       if (!this._isResizing) {
         return clearTimeout(this._resizeTimer)
@@ -260,7 +265,7 @@ export default class DevTools extends Emitter {
       } else if (displaySize > 100) {
         displaySize = 100
       }
-      this.config.set('displaySize', displaySize)
+      setDisplaySize(displaySize)
     }
     const endListener = () => {
       clearTimeout(this._resizeTimer)

src/DevTools/DevTools.scss

@@ -11,7 +11,7 @@
   z-index: 500;
   display: none;
   opacity: 0;
-  transition: opacity $anim-duration;
+  transition: opacity $anim-duration, height $anim-duration;
   .tools {
     @include overflow-auto();
     height: 100%;

src/lib/util.js

@@ -531,6 +531,45 @@ export var toStr = _.toStr = (function (exports) {
     return exports;
 })({});
 
+/* ------------------------------ debounce ------------------------------ */
+
+export var debounce = _.debounce = (function (exports) {
+    /* Return a new debounced version of the passed function.
+     *
+     * |Name  |Type    |Desc                           |
+     * |------|--------|-------------------------------|
+     * |fn    |function|Function to debounce           |
+     * |wait  |number  |Number of milliseconds to delay|
+     * |return|function|New debounced function         |
+     */
+
+    /* example
+     * const calLayout = debounce(function () {}, 300);
+     * // $(window).resize(calLayout);
+     */
+
+    /* typescript
+     * export declare function debounce(fn: Function, wait: number): Function;
+     */
+    exports = function(fn, wait, immediate) {
+        var timeout;
+        return function() {
+            var ctx = this;
+            var args = arguments;
+
+            var throttler = function() {
+                timeout = null;
+                fn.apply(ctx, args);
+            };
+
+            if (!immediate) clearTimeout(timeout);
+            if (!immediate || !timeout) timeout = setTimeout(throttler, wait);
+        };
+    };
+
+    return exports;
+})({});
+
 /* ------------------------------ ucs2 ------------------------------ */
 
 export var ucs2 = _.ucs2 = (function (exports) {
@@ -8166,6 +8205,38 @@ export var stripHtmlTag = _.stripHtmlTag = (function (exports) {
     return exports;
 })({});
 
+/* ------------------------------ throttle ------------------------------ */
+
+export var throttle = _.throttle = (function (exports) {
+    /* Return a new throttled version of the passed function.
+     *
+     * |Name  |Type    |Desc                           |
+     * |------|--------|-------------------------------|
+     * |fn    |function|Function to throttle           |
+     * |wait  |number  |Number of milliseconds to delay|
+     * |return|function|New throttled function         |
+     */
+
+    /* example
+     * const updatePos = throttle(function () {}, 100);
+     * // $(window).scroll(updatePos);
+     */
+
+    /* typescript
+     * export declare function throttle(fn: Function, wait: number): Function;
+     */
+
+    /* dependencies
+     * debounce 
+     */
+
+    exports = function(fn, wait) {
+        return debounce(fn, wait, true);
+    };
+
+    return exports;
+})({});
+
 /* ------------------------------ tryIt ------------------------------ */
 
 export var tryIt = _.tryIt = (function (exports) {