Question

当满足所有触发器时执行回调的惯用方法是什么？

特别是，在下面的示例中，当用户按下proceed时，运行#btn函数的方式是什么，但不早于先前启动的AJAX请求返回响应（或者，如果用户过早按下按钮，请等待AJAX响应，然后再触发proceed）？

proceed = (ajaxData) -> ...

# Launch an AJAX request and display a button:
$("#btn").on 'click', -> ???

$.ajax
  type: "POST"
  url: ...
  data: ...
  success: (ajaxData) -> ???

Answer 1

使用promises，它存在于ES6，jQuery和其他框架中（angular ...）

在ES6中使用Promise.all（...）

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all

你必须在promises中封装你所有的ajax调用，然后在所有promises被解析时调用Promise.all允许。

在jQuery中还有一个等价物，请参见此处的示例： How do you work with an array of jQuery Deferreds?

Answer 2

实现此目的的简单方法，只需使用布尔变量作为标志，并在ajax请求成功时将其设置为true：

abc.c: In function 'f':
abc.c:14:32: error: lvalue required as unary '&' operand
          printf("&&a is:%p\n",&(&a));
                        ^

Answer 3

每个$ .ajax调用都会返回承诺。

考虑一下：

num_x_steps = 3
num_y_steps = 5
x, y = np.mgrid[0:1:(num_x_steps * 1j), 0:2:(num_y_steps * 1j)]

无论如何，我不认为禁用按钮是这里最好的UX选项。想想隐藏它或显示一些信息。

Answer 4

看起来包装到promises / deferreds是一种正确的方法，但似乎在JQuery Deferred中包含一个按钮点击需要a lot of code才能看似简单。

作为参考，这就是我为这个特殊案例提出的建议，以及似乎可以作为一次性解决方案的工作：

proceed = (ajaxData) -> ...

proceedLock = {buttonClicked: false, data: null}
tryProceed = ->
  if proceedLock.buttonClicked and proceedLock.data?
    proceed proceedLock.data

# Launch an AJAX request and display a button:
$("#btn").on 'click', ->
  proceedLock.buttonClicked = true
  tryProceed()

$.ajax
  type: "POST"
  url: ...
  data: ...
  success: (ajaxData) ->
    proceedLock.data = ajaxData
    tryProceed()

几个触发JavaScript回调的事件

4 个答案: