异步任务完成后通知

Question

我正在使用move.js 构建一个用于动画的游戏，但是它花费的时间太长，所以当玩家点击正确的解决方案时，它会在正确的解决方案改变它的颜色之前显示获胜消息，所以我使用延迟对象来触发一个事件并在动画结束时捕获它。

这是我的代码：

var deferred = new $.Deferred();
click(e);
//show message when game is over
$.when(deferred).then(function(){
    if (this.checkIfWin()){
        alert('you won !');
        this.nextLevel();
    }
});
function click(e){
    move(e)
    .set('background-color','black')
    .delay('0.1s')
    .end();
    deferred.notify();
}

但它没有收到通知，消息也没有出现。我在这里错过了什么？

Answer 1

因为 javascript 中的动画是异步的（它们通过计时器运行），所以知道它们何时完成的唯一方法是挂钩某种完成回调或完成通知。

我自己并不了解 move.js，但看起来您可以通过向 .end(fn) 方法提供回调来获得这样的回调。但是，您还必须修复您的代码，因为this.checkIfWin() 中的this 在这两个代码块中都不是正确的值。我不知道你想要它是什么（因为你没有显示你的代码的那部分），但你必须引用除this 之外的其他对象。在任何情况下，以下是使用和不使用延迟的代码的一般结构。

var deferred = new $.Deferred();

// your code was using this here 
// so I will save a reference to it that can be used later, but there is
// probably a better way to do this if I could see the rest of your code
var obj = this;

click(e);

//show message when game is over
deferred.promise().then(function(){
    if (obj.checkIfWin()){
        alert('you won !');
        obj.nextLevel();
    }
});

function click(e){
    move(e)
    .set('background-color','black')
    .delay('0.1s')
    .end(function() {
        deferred.resolve();
    });
}

---

在这种情况下，您似乎不需要使用 deferred，因为您可以将完成代码直接放在回调中：

// your code was using this here 
// so I will save a reference to it that can be used later, but there is
// probably a better way to do this if I could see the rest of your code
var obj = this;

click(e);

function click(e){
    move(e)
    .set('background-color','black')
    .delay('0.1s')
    .end(function() {
        if (obj.checkIfWin()){
            alert('you won !');
            obj.nextLevel();
        }
    });
}

Answer 2

编辑，向.end() 添加回调函数以包括deferred.notify。见 cmets，Move#end([fn])

试试

var deferred = new $.Deferred();
click(e); // `e` undefined ?
deferred.progress(function(msg) {
// `this` within `deferred`
// references `deferred` object ,
// try `obj.checkWin()`, `obj.nextLevel()`
  if (obj.checkWin()) {
    alert(msg);
    obj.nextLevel();
  }
});

function click(e) {
    // `e` undefined ?
    move(e)
    .set('background-color','black')
    // `.delay()` accepts `number` as argument ? 
    .delay('0.1s')
      // see comments , 
      // http://visionmedia.github.io/move.js/#example-11
    .end(function() {
      deferred.notify("you won !");
    });
};

jsfiddle http://jsfiddle.net/guest271314/4Av4Z/