Question

这是一个小功能，应该能够打开和关闭一个盒子。打开和关闭需要考虑一些CSS转换，所以我想我可以使用$.Deferred。

此处的相关代码：

function Test(){

  // these are assigned Deferred objects during transitions
  this.opening = this.closing = false;

  this.isOpen = false;
  this.x = $('<div />').appendTo('body');
  this.x.width();
}

Test.prototype.open = function(){

  // box is already opening: return opening deferred
  if(this.opening)    
    return this.opening;

  // box is closing: this is the chain
  // that is supposed to wait for the box to close,
  // then open it again 
  if(this.closing)
    return this.closing.then((function(){
      return this.open();
    }).bind(this));

  // box is already open, resolve immediately
  if(this.isOpen)
    return $.when();    

  console.log('opening');
  this.opening = new $.Deferred();
  this.x.addClass('open');
  setTimeout((function(){
    this.opening.resolve();
    this.opening = false;
    this.isOpen = true;      
  }).bind(this), 1000);

  return this.opening;
};

close（）函数反向打开（）。

当我尝试在打开盒子时关闭盒子时出现问题，反之亦然。例如：

var t = new Test();

t.open(); // takes 1 second

// call close() after 0.05s
setTimeout(function(){
  t.close();
}, 50);

似乎发生了堆栈溢出或类似情况。有谁知道造成它的原因是什么？

整个测试代码为here，但具有更高的超时值，因此不会导致Chrome崩溃。

Answer 1

这里有一个小小的时间问题。当您在.closing承诺后链接打开或在.opening承诺之后关闭时，这些回调将在删除承诺之前执行：

this.opening.resolve();
this.opening = false;

问题是jQuery确实从resolve内同步执行，所以＆＃34;重试＆＃34;当this.open()承诺仍然存在时，在关闭之后被链接的.closing再次链接自己，并且又一次又一次......

你应该能够通过

来避免这种情况

var def = this.opening;
this.opening = false;
this.isOpen = true;
def.resolve(); // trigger those who are waiting to immediately close it again

Answer 2

我注意到您的代码有几个问题：

返回延迟对象而不是promises，只能在promises上执行.then（）
用bool值覆盖延迟变量，我使用的是deferred.state()

这是您的代码的更新版本：

function Test(){
  this.opening = this.closing = false;
  this.isOpen = false;
  this.x = $('<div />').appendTo('body');
  this.x.width();
}

Test.prototype.open = function(){
  if(this.opening && this.opening.state() == 'pending')    
    return this.opening.promise();

  if(this.closing && this.closing.state() == 'pending')
    return this.closing.promise().then((function(){
      return this.open();
    }).bind(this));

  if(this.isOpen)
    return $.when();    

  console.log('opening');
  this.opening = new $.Deferred();
  this.x.addClass('open');
  setTimeout((function(){
    this.isOpen = true;    
    this.opening.resolve();
  }).bind(this), 1000);

  return this.opening.promise();
};

Test.prototype.close = function(){
  if(this.opening && this.opening.state() == 'pending') {
    console.log('opening is pending');
    return this.opening.promise().then((function(){
      console.log('opening is resolved');
      return this.close();
    }).bind(this));
  }

  if(this.closing && this.closing.state() == 'pending'){    
    console.log('closing is pending');
    return this.closing.promise();
  }

  if(!this.isOpen)
    return $.when();    

  console.log('closing');
  this.closing = new $.Deferred();
  this.x.removeClass('open');
  setTimeout((function(){
    console.log('closing resolved');
    this.closing.resolve();
    this.isOpen = false;
  }).bind(this), 1000);

  return this.closing.promise();  
};

var t = new Test();

t.open();

setTimeout(function(){
  t.close();
}, 15);

输出：

"opening"
"opening is pending"
"opening is resolved"
"closing"
"closing resolved"

Answer 3

我无法击败Bergi关于＆＃34;堆栈溢出的解释＆＃34;问题，但我无法想到你最好不要试图管理自己的动画队列，这既困难又不必要。

明智地使用jQuery的内置.queue()，.dequeue()和one()方法，您可以使CSS转换行为与jQuery动画完全相同 - 集成到元素的标准＆＃34; fx＆＃34;队列完成，其承诺由.promise()方法返回。

function Test() {
    this.x = $('<div/>').appendTo('body');
    this.x.width();
    this.transitionEndString = 'webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend'; // cross-browser "transitionend" event names.
}

Test.prototype.open = function() {
    var that = this,
        x = this.x;
    x.queue('fx', function(next) {
        if(!x.hasClass('open')) {
            x.addClass('open').one(that.transitionEndString, next);
        } else {
            x.dequeue();
        }
    });
    return x.promise();
};
Test.prototype.close = function() {
    var that = this,
        x = this.x;
    x.queue('fx', function(next) {
        if(x.hasClass('open')) {
            x.removeClass('open').one(that.transitionEndString, next);
        } else {
            x.dequeue();
        }
    });
    return x.promise();
};

else { x.dequeue(); }条款对于强制承诺在未调用转换时作出响应是必要的。

<强> DEMO

延迟链崩溃的浏览器

3 个答案: