BUG 报告，急求协助！拜谢了！

jatyhu

如图，官方外卖DEMO，在安卓手机上快速点击下面四个按钮不停连续快速切换页面，3分钟内就会发现无法切换。且不会恢复。
测试了官方另外的DEMO，网易新闻那个更容易发生，往往切换十来次就会卡死。

急求解决~~ 等不到你们出下一版更新了~~ 求贵公司研发部给予少许提示~~我们直接改本地代码也行啊！！拜谢了！

jatyhu

跟踪X5的控件目前得到的判断是：问题出在$active.animationEnd
Contents.js里的函数slide: function (type, next, fn) 会对一个变量sliding做true/false的标志位设置。基本流程是开始滑动时，置位TRUE，当收到animationEnd后置位false，即可允许下次滑动操作。

打桩看到如下的流程是正常操作时的输出。
由“to false”开始，即contentTo这个函数开始，当前sliding为false，允许滑动。
由animationEnd事件恢复置位false正常结束。



下面这个输出是出问题那刻的，可以看到，缺失了animationEnd事件，因此置位一直没回复，就无法进行下一次操作了。


AnimationEnd是不是可靠的？有没有其它方法可以替代？


下面是X5相关源码及我打桩的位置（to 那个桩是另外一个函数，不太影响，我就不放进来了）。
       slide: function (type, next, fn) {
           var $active = this.$el.find('>.x-contents-content.active');
           var $next = next || $active[type]();
           var direction = type == 'next' ? 'left' : 'right';
           var fallback = type == 'next' ? 'first' : 'last';
           var that = this;
           
           if (!$next.length) {
              if (!this.wrap) return;
              $next = this.$el.find('>.x-contents-content')[fallback]();
           }
           
           var pos = $next.parent().children().index($next);
           var toContent = this.contents[pos];
           var currentPos = $active.parent().children().index($active);
           if(this.sliding == true){
              return;
           }
           
           this.sliding = true;
          console.log("slide "+this.sliding);
           var e = $.Event('slide.container', { relatedTarget: $next[0], direction: direction });
           this.fireEvent('onActiveChange', {source : this, to: pos, from: currentPos, type: type});
           
           if(currentPos >= 0 && this.contents[currentPos] && this.contents[currentPos].fireEvent)
              this.contents[currentPos].fireEvent('onInactive', {source : this, index: currentPos});

           if ($next.hasClass('active')){
              this.sliding = false;
              console.log("slide $next.hasClass('active') "+this.sliding);
              return;
           }
           
           if (currentPos != -1 && this._inited && this.slidable && $.support.transition) {
              this.$el.trigger(e);
              if (e.isDefaultPrevented()) {
                  console.log("isDefaultPrevented ");
                  return;
              }
              if(direction == "right"){
                  console.log("direction == right");
                  $active.animationEnd(function(){
                     console.log("animationEnd  right");
                     $next.addClass('active').removeClass('x-left-to-center');
                     $next.transition(0);
                     $next.transform('');
                     $next.css('opacity',1);
                     $active.addClass('x-content-on-right').removeClass('active x-center-to-right');
                     that.sliding = false;
                     console.log("slide right that.slidin  "+that.sliding);
                     that.active = pos;
                     that.getModel().fireEvent('reflow', $next.get(0));
                     setTimeout(function () {
                         that.$el.trigger('slide.container');
                         that.getModel().fireEvent("onResize",{source:this});
                         that.addRouteItem($next);
                         that.fireEvent('onActiveChanged', {source : this, to: pos, from: currentPos, type: type});
                         fn && fn();
                         if(toContent && toContent.fireEvent)
                            toContent.fireEvent('onActive', {source : that, index: pos});
                     }, 0);
                  });
                  $next.addClass("x-left-to-center").removeClass('x-content-on-right x-content-on-left');
                  $active.addClass("x-center-to-right");
                  console.log("after direction == right");
              }else{
                  console.log("direction != right");
                  $active.animationEnd(function(){
                     console.log("animationEnd  !right ");
                     $next.addClass('active').removeClass('x-right-to-center');
                     $next.transition(0);
                     $next.transform('');
                     $next.css('opacity',1);
                     $active.addClass('x-content-on-left').removeClass('active x-center-to-left');
                     that.sliding = false;
                     console.log("slide !right  that.slidin  "+that.sliding);
                     that.active = pos;
                     that.getModel().fireEvent('reflow', $next.get(0));
                     setTimeout(function () {
                         that.$el.trigger('slide.container');
                         that.getModel().fireEvent("onResize",{source:this});
                         that.addRouteItem($next);
                         that.fireEvent('onActiveChanged', {source : this, to: pos, from: currentPos, type: type});
                         fn && fn();
                         if(toContent && toContent.fireEvent)
                            toContent.fireEvent('onActive', {source : that, index: pos});
                     }, 0);
                  });
                  $next.addClass("x-right-to-center").removeClass('x-content-on-right x-content-on-left');
                  $active.addClass("x-center-to-left");
                  console.log("after direction !right");
              }
           } else {
              this.$el.trigger(e);
              if (e.isDefaultPrevented()) return;
              
              if(direction == "right"){
                  $active.addClass('x-content-on-right').removeClass('active');
              }else{
                  $active.addClass('x-content-on-left').removeClass('active');
              }
              $next.removeClass('x-content-on-left x-content-on-right').addClass('active');
              this.sliding = false;
              console.log("slide else this.sliding  "+this.sliding);
              that.active = pos;
              this.$el.trigger('slide.container');
              this.getModel().fireEvent("onResize",{source:this});
              that.addRouteItem($next);
              this.fireEvent('onActiveChanged', {source : this, to: pos, from: currentPos, type: type});
              fn && fn();
              if(toContent && toContent.fireEvent)
                  toContent.fireEvent('onActive', {source : that, index: pos});
              this._inited = true;
              this.getModel().fireEvent('reflow', $next.get(0));
           }
           
           return this;
       },

jatyhu

发出animationEnd的地方,看起来没大问题，也不好改：

E:\WeX5_V3.6\model\UI2\system\lib\jquery\transition.js

卡壳了。。我跟不下去了。。。   

    $.fn.animationEnd = function (callback) {
        var events = ['webkitAnimationEnd', 'OAnimationEnd', 'MSAnimationEnd', 'animationend'],
            i, j, dom = this;
       console.log("$.fn.animationEnd");
        function fireCallBack(e) {
          console.log("$.fn.animationEnd fireCallBack");
            callback(e);
            for (i = 0; i < events.length; i++) {
                console.log("$.fn.animationEnd dom.off");
                dom.off(events, fireCallBack);
            }
        }
        if (callback) {
            console.log("$.fn.animationEnd callback");
            for (i = 0; i < events.length; i++) {
                console.log("$.fn.animationEnd dom.on");
                dom.on(events, fireCallBack);
            }
        }
        return this;
    };
      
   下面这个是正常情况下的输出



下面这个出问题时刻的输出


function fireCallBack 完全没进去。。。

liangyongfei

jatyhu 发表于 2017-2-26 21:24
发出animationEnd的地方,看起来没大问题，也不好改： E:\WeX5_V3.6\model\UI2\system\lib\jquery\transitio ...

http://docs.wex5.com/wex5-ui-question-list-2084

jatyhu

liangyongfei 发表于 2017-2-27 11:43
http://docs.wex5.com/wex5-ui-question-list-2084

收到，请结帖。。。