Question

我不能为了我的生活，为什么成功功能会被触发两次。由于以下页面转换，因此只需触发一次。这个问题似乎只对webkit浏览器safari / chrome有影响。 Firefox按照预期的方式工作。如果我拿出名为removeClass的行，它不会发射两次。

//Page Loader Variables
var ajaxPageRequest;
var ajaxPageLoading = false;



function getPage(url) {
    //Checks to see if transition is complete before changing pages
    $('.pageContent, .loadbar').addClass('init');
    var newPage = $('#pageContent');
    newPage.one('oTransitionEnd transitionEnd webkitTransitionEnd',
      function(e) {
        if (ajaxPageRequest) {
          ajaxPageRequest.abort();
          ajaxPageRequest = '';
        }
        replacePageContent(url);
      }
    );
  }

function replacePageContent(ajaxPageAddress) {
    if (ajaxPageRequest) {
      ajaxPageRequest.abort();
      ajaxPageRequest = '';
    }
    ajaxPageLoading = true;
    ajaxPageRequest = $.ajax({url: ajaxPageAddress, async: true, cache: false})
      .success(function(ajaxPageData) {
        ajaxPageRequest = '';
        if (ajaxPageLoading) {
          ajaxPageLoading = false;
          console.log('load complete' + ": " + ajaxPageAddress);
          if (ajaxPageData) {
            if (ajaxPageAddress != window.location) {
              //add the new page to the window.history
              window.history.pushState({
                path: ajaxPageAddress
              }, '', ajaxPageAddress);
            }
            $("#pageContent").html($(ajaxPageData).find("#pageContent > *")).removeClass('init');
            $('#pageContent, .loadbar').removeClass('init');
          }
        }
      });
  }

Answer 1

关于＆＃34; oTransitionEnd transitionEnd webkitTransitionEnd＆＃34;因为webkit浏览器既支持transitionEnd又支持webkitTransitionEnd，导致两个事件同时触发，从而导致这种情况发生。我添加了一点浏览器支持检测，它清除了所有内容。

在webkit

1 个答案: