Javascript事件同步 [英] Javascript Event Synchronization

问题描述

我正在建立一个音乐会日历，该日历在javascript上非常繁琐(使用jQuery).我在同步整个应用程序中的各种事件时遇到麻烦，并且正在寻找有关如何执行此操作的建议.

I'm building a concert calendar that's very heavy on javascript (using jQuery). I'm having trouble synchronizing various events throughout the app, and I'm looking for suggestions for how to do this.

一个简单用例的示例:

1. 用户点击一个月
2. 日历跳到那个月

更复杂的用例示例:

1. 用户选择一个艺术家
2. 日历确定该艺术家的首场演出的日期
3. 日历跳到那个月
4. 日历突出显示了该艺术家的表演

一个偶然的问题是，当我尝试突出显示艺术家的作品时，新的月份还没有出现.因此，即使按顺序调用这些功能，也不会突出显示该节目.显然，使用setTimeout()很麻烦，并且不能保证能正常工作.

One occasional problem is that the new month isn't yet rendered by the time I try to highlight the artist's show(s). Thus, the show isn't highlighted even though these functions are called in order. Obviously, using setTimeout() is pretty hacky, and not guaranteed to work.

首先，有一个简单的问题-以下功能是否有可能(甚至在Chrome中)不按顺序运行?

So first, a simple question -- would it ever be possible (even in Chrome) for the following function to run out of sequence?

function steps(){

    stepOne(); //TAKES 30 SECONDS

    stepTwo(); //TAKES < 1 SECOND

}

第二，一个相关的简单问题:

Second, a related simple question:

    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");

无论何时发生该事件.

但是，考虑到不同的事件可能需要根据用例调用不同的函数集，因此我认为这也有些笨拙.我可以随时打电话给

However, I'm guessing this would be kind of unwieldy as well, considering different events might need to call different sets of functions depending on the use case. I could always call

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

在向其中添加新事件之前，但是再次强调-我倾向于按照第一种方法中的建议创建一种主脚本".

before adding new events to it, but again -- I'm leaning toward creating sort of a master "script" as I suggested in the first approach.

希望这不太含糊-有任何反馈吗?对必须同步各种事件的复杂UI有任何经验吗?

Hopefully this isn't too vague -- any feedback? Any experience with complex UIs that had to synchronize various events?

非常感谢

迈克尔

推荐答案

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

Your approach #1 is the best way, and the most natural using jQuery. Most functions that act on the user interface and do something accept a callback function parameter, which gets called after the function has executed.

如果您按照相同的模式执行未在jQuery中实现的操作，则会使您的代码更具可读性.多米尼克的答案是一个很好的例子:

Where you are doing things not implemented in jQuery following the same pattern will make your code more readable. dominic's answer is a good terse example:

function steps(){

    stepOne(stepTwo); 

}

function stepOne(callback){

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

}

这篇关于Javascript事件同步的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！