商品详情

@@ -7,6 +7,7 @@
 
 'use strict';
 
+const $ = require('yoho-jquery');
 const template = require('components/modal.hbs');
 const Overlay = require('./overlay');
 

@@ -7,6 +7,8 @@
 
 'use strict';
 
+const $ = require('yoho-jquery');
+
 const ANIMATIONS = {
     none: {
         in: 'overlay-in',
@@ -66,6 +68,18 @@ class Overlay {
             .removeClass(this.settings.animationClasses.out);
     }
 
+    _cleanupListener() {
+        this.elem.css({
+            visibility: 'hidden'
+        });
+        this._clearStylesClasses();
+        this.isVisible = false;
+        this.elem.detach();
+
+        // 一次性监听，动画完成事件触发后删除监听器
+        this.elem[0].removeEventListener('webkitTransitionEnd', this._cleanupListener);
+    }
+
     /**
      * 显示覆盖层
      */
@@ -95,19 +109,8 @@ class Overlay {
     hide() {
         if (this.isVisible) {
             this._clearStylesClasses();
-            const listener = () => {
-                this.elem.css({
-                    visibility: 'hidden'
-                });
-                this._clearStylesClasses();
-                this.isVisible = false;
-                this.elem.detach();
 
-                // 一次性监听，动画完成事件触发后删除监听器
-                this.elem[0].removeEventListener('webkitTransitionEnd', listener);
-            };
-
-            this.elem[0].addEventListener('webkitTransitionEnd', listener);
+            this.elem[0].addEventListener('webkitTransitionEnd', this._cleanupListener.bind(this));
             this.elem.addClass(this.settings.animationClasses.out);
 
             if (this.settings.disableScrolling) {
@@ -116,6 +119,10 @@ class Overlay {
                 });
             }
 
+            setTimeout(()=> {
+                this._cleanupListener();
+            }, 100);
+
             this.settings.onClose();
         }
     }

 const Vue = require('yoho-vue');
 const app = require('product/detail/index.vue');
 const loading = require('common/loading');
-const _ = require('lodash');
+const lazyload = require('yoho-vue-lazyload');
 
 require('../common/overlay');
 
+Vue.use(lazyload);
+
+(() => {
+    let stop = 0;
+
+    $(document).ajaxStart(()=> {
+        // start = new Date().getTime();
+
+        // setTimeout(()=> {
+        if (stop === 0) { // 超过100ms请求仍未结束则显示
+            loading.show();
+        }
+
+        // }, 100);
+    });
+
+    $(document).ajaxStop(()=> {
+        stop = new Date().getTime();
+        loading.hide();
+    });
+})();
+
 new Vue({
     el: '#app',
     components: {
@@ -12,14 +34,4 @@ new Vue({
     }
 });
 
-$(document).ajaxStart(()=> {
-    _.debounce(()=> {
-        loading.show();
-    }, 100)();
-});
 
-$(document).ajaxStop(()=> {
-    _.debounce(()=> {
-        loading.hide();
-    }, 500)();
-});