Optimize append and remove options

Sergio Crisostomo
1 parent 17db7df4
Showing 3 changed files with 30 additions and 29 deletions Show diff stats
src/components/select/select.vue
src/components/select/utils.js
test/unit/specs/select.spec.js
@@ -50,6 +50,7 @@
     import { oneOf, findComponentDownward } from '../../utils/assist';
     import Emitter from '../../mixins/emitter';
     import Locale from '../../mixins/locale';
+    import {debounce} from './utils';
  
     const prefixCls = 'ivu-select';
  
@@ -623,6 +624,18 @@
                     this.broadcast('iOption', 'on-query-change', val);
                 }
             },
+            debouncedAppendRemove: debounce(function(){
+                if (!this.remote) {
+                    this.modelToQuery();
+                    this.$nextTick(() => this.broadcastQuery(''));
+                } else {
+                    this.findChild((child) => {
+                        child.selected = this.multiple ? this.model.indexOf(child.value) > -1 : this.model === child.value;
+                    });
+                }
+                this.slotChange();
+                this.updateOptions(true, true);
+            }),
             // 处理 remote 初始值
             updateLabel () {
                 if (this.remote) {
@@ -656,34 +669,8 @@
             this.updateOptions(true);
             document.addEventListener('keydown', this.handleKeydown);
  
-            this.$on('append', () => {
-                if (!this.remote) {
-                    this.modelToQuery();
-                    this.$nextTick(() => {
-                        this.broadcastQuery('');
-                    });
-                } else {
-                    this.findChild(child => {
-                        child.selected = this.multiple ? this.model.indexOf(child.value) > -1 : this.model === child.value;
-                    });
-                }
-                this.slotChange();
-                this.updateOptions(true, true);
-            });
-            this.$on('remove', () => {
-                if (!this.remote) {
-                    this.modelToQuery();
-                    this.$nextTick(() => {
-                        this.broadcastQuery('');
-                    });
-                } else {
-                    this.findChild(child => {
-                        child.selected = this.multiple ? this.model.indexOf(child.value) > -1 : this.model === child.value;
-                    });
-                }
-                this.slotChange();
-                this.updateOptions(true, true);
-            });
+            this.$on('append', this.debouncedAppendRemove);
+            this.$on('remove', this.debouncedAppendRemove);
  
             this.$on('on-select-selected', (value) => {
                 if (this.model === value) {
+export function debounce(fn) {
+    let waiting;
+    return function() {
+        if (waiting) return;
+        waiting = true;
+        const context = this,
+            args = arguments;
+        const later = function() {
+            waiting = false;
+            fn.apply(context, args);
+        };
+        this.$nextTick(later);
+    };
+}
@@ -156,7 +156,7 @@ describe(&#39;Select.vue&#39;, () =&gt; {
   });
  
   describe('Performance tests', () => {
-    xit('should handle big numbers of options', done => {
+    it('should handle big numbers of options', done => {
       const manyLaterOptions = Array.apply(null, Array(200)).map((_, i) => {
         return {
           value: i + 1,