Javascript Événement De Synchronisation

Je suis en train de construire un calendrier de concert qui est très lourd sur le javascript (à l'aide de jQuery). Je vais avoir des problèmes de synchronisation de divers événements tout au long de l'app, et je suis à la recherche de suggestions pour savoir comment faire cela.

Un exemple d'un cas d'utilisation simple:

Utilisateur clique sur un mois
Calendrier ignore à ce mois

Un exemple plus complexe de cas d'utilisation:

Utilisateur sélectionne un artiste
Calendrier détermine la date de cette artiste pour la première fois
Calendrier ignore à ce mois
Calendrier souligne que l'artiste du spectacle(s)

Un problème occasionnel, c'est que le mois n'est pas encore rendus par le temps, j'essaie de mettre en évidence l'artiste du spectacle(s). Ainsi, le spectacle n'est pas mis en évidence, même si ces fonctions sont appelées dans l'ordre. De toute évidence, à l'aide de setTimeout() est assez hacky, et pas garanti pour fonctionner.

Alors d'abord, une simple question -- est-il possible (même en Chrome) pour la fonction suivante à exécuter hors de la séquence?

function steps(){

    stepOne(); //TAKES 30 SECONDS

    stepTwo(); //TAKES < 1 SECOND

}

Deuxième, une question simple:

 S'il est placé à la fin d'une fonction, d'un JS de rappel TOUJOURS courir après 
tout le reste de la fonction donnée a fini de s'exécuter?

Si oui, je pourrait nid chaque fonction comme un rappel de sa fonction précédente. Mais qui serait susceptible de devenir trop compliqué, une fois que vous envisager tous les cas d'utilisation.

Ici est une approche que j'envisage:

 1) Permettre à chaque fonction de l'option de rappel paramètre. Si il est présent, 
appel à la fin de la fonction. 

2) au Cours d'une INTERFACE utilisateur d'actualisation, de créer un tableau, et de la pile toutes les fonctions 
appelé dans ce tableau. 

3) une Fois que ce "script" est terminé, parcourir le tableau, en appelant 
chaque fonction dans l'ordre qu'il a ajouté, à l'aide de la fonction suivante 
comme la précédente, la fonction de rappel.

J'imagine que cela permettrait de s'assurer que toutes les fonctions sont appelées dans l'ordre.

Une autre approche consiste à fixer les écouteurs d'événement à l'aide de

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

Et puis l'appel de

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

Chaque fois que cet événement se produit.

Cependant, je suppose que ce serait un peu lourd ainsi, en tenant compte des différents événements pourraient avoir besoin d'appeler différentes fonctions selon le cas d'utilisation. Je pourrais toujours faire appel à

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

avant d'ajouter de nouveaux événements, mais encore une fois -- je suis penchée vers la création d'une sorte de maître "script" comme je l'ai suggéré dans la première approche.

J'espère que ce n'est pas trop vague -- des commentaires? Aucune expérience avec le complexe de l'Isu qui avait pour synchroniser les différents événements?

Merci beaucoup,

Michael

InformationsquelleAutor marclar | 2009-07-02

1

Votre approche #1 est le meilleur moyen, et le plus naturel à l'aide de jQuery. La plupart des fonctions que la loi sur l'interface utilisateur et de faire quelque chose d'accepter une fonction de rappel paramètre, qui est appelée après la fonction est exécutée.

Où on fait les choses pas mis en œuvre dans jQuery suivant le même modèle permet de rendre votre code plus lisible. dominique réponse est un bon laconique exemple:
```
function steps(){

    stepOne(stepTwo); 

}

function stepOne(callback){

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

}
```
- Je pense que c'est un bon point qu'il suit jQuery convention. Cependant, j'ai trouvé qu'il y a quelques temps lors de la configuration d'un délai d'attente de 1 ms va faire fonctionner les choses là où ils n'en avaient pas auparavant. Ça n'a aucun sens pour moi (si JS appels sont réellement exécutés dans l'ordre, alors que des appels asynchrones, bien sûr), mais c'est un hack, je vais devoir vivre avec pour l'instant. Merci, tout le monde-tous les conseils très apprécié 🙂
- Je pensais que le code semblait familier! 🙂
InformationsquelleAutor Adam

Essayer de passer dans la fonction à appeler à un argument

function steps(){

    stepOne(stepTwo); 

}

function stepOne(callback){

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

}

InformationsquelleAutor DMCS

De la dernière approche, de l'aide personnalisée événements, est la meilleure approche, à mon humble avis.

La conception de divers éléments et les événements et de les laisser interagir les uns avec les autres.

E. g. Disons que vous avez un Calendrier de l'objet.

var calendar = function()
{
     var pub = {};


     pub.highlightRow = function(row) {};

     pub.getRowByContent = function(content) { };

     pub.selectMonth = function()
                       {
                            //your code to actually select month.

                            //Once all the necessary DOM work is done, fire the
                            //monthSelected event (namespacing the event so as to avoid the clash with other events). 
                            $(document).trigger('calendar:monthSelected');
                        };

     return pub;
}();

Maintenant votre artiste de la méthode de recherche peut ressembler,

function searchArtist(artistName)
{
    $(document).bind('calendar:monthSelected'), function()
                                                {
                                                    calendar.highlightRow(calendar.getRowByContent(artistName));
                                                }
                                                );

    calendar.selectMonth(getShowMonthByArtist(artistName));
}

InformationsquelleAutor SolutionYogi

0

Vous pouvez utiliser du javascript alors() méthode pour synchroniser les fonctions et les exécuter dans l'ordre que vous voulez, comme suit:
```
function steps() {

    stepOne().then(function() { stepTwo(); })

}
```
InformationsquelleAutor Aniket Mukherjee

Vous devez vous connecter pour publier un commentaire.