JavaScript 事件同步

Question

我正在构建一个非常依赖 javascript(使用 jQuery)的音乐会日历。我在整个应用程序中同步各种事件时遇到问题，我正在寻找有关如何执行此操作的建议。

一个简单用例的例子:

1. 每月用户点击次数
2. 日历跳到那个月

一个更复杂的用例示例:

1. 用户选择一位艺术家
2. 日历决定了该艺术家首场演出的日期
3. 日历跳到那个月
4. 日历重点介绍该艺术家的表演

一个偶然的问题是，当我试图突出艺术家的表演时，新的月份还没有呈现出来。因此，即使按顺序调用这些函数，该节目也不会突出显示。显然，使用 setTimeout() 是很老套的，并且不能保证有效。

首先，一个简单的问题 -- 以下函数是否可能(即使在 Chrome 中)乱序运行？

function steps(){

    stepOne(); //TAKES 30 SECONDS

    stepTwo(); //TAKES < 1 SECOND

}

其次，一个相关的简单问题:

    If placed at the end of a function, will a JS callback ALWAYS run after 
    everything else in the given function has finished running?

If so, I could nest each function as a callback of its previous function. But that would likely become unwieldy, once you consider all the different use cases.

Here's an approach I'm considering:

    1) Allow each function an optional callback parameter. If it's present,
       call it at the very end of the function.

    2) During a UI refresh, create an array, and stack any functions to be
       called within this array.

    3) Once this "script" is completed, iterate through the array, calling
       each function in the order it was added, using the next function 
       as the previous function's callback.

I imagine this would ensure that all the functions are called in order.

Another approach is to attach event listeners using

$(document).bind("listener.name", fnCallback);

然后调用

$(document).trigger("listener.name");

每当该事件发生时。

但是，我猜这也有点笨拙，考虑到不同的事件可能需要根据用例调用不同的函数集。我随时可以打电话

$(document).unbind("listener.name");

在向其中添加新事件之前，我再次倾向于创建一种主“脚本”，正如我在第一种方法中所建议的那样。

希望这不是太含糊——有什么反馈吗？是否有使用必须同步各种事件的复杂 UI 的经验？

非常感谢，

迈克尔

Answer 1

您的方法 #1 是最好的方法，也是使用 jQuery 最自然的方法。大多数作用于用户界面并执行某些操作的函数都接受回调函数参数，该参数在函数执行后被调用。

如果您按照相同的模式执行未在 jQuery 中实现的操作，将使您的代码更具可读性。多米尼克的回答是一个很好的简洁示例:

function steps(){

    stepOne(stepTwo); 

}

function stepOne(callback){

    var AsyncDone = function() { 
      //any Synchronus Things here
      callback(); 
    }
    someAsyncFunction( params, AsyncDone );

}