Πώς θα χειριστεί απασχολημένος εικόνες σε μια ιστοσελίδα AJAX;

ψήφοι
2

Αυτό το θέμα ασχολείται με θέματα συνταύτισης, για τις προτάσεις σχετικά με το πώς να εμφανίσετε μια πολυάσχολη εικονίδιο δείτε αυτό το ερώτημα: Javascript - φόρτωση / απασχολημένος δείκτη ή διαφανή div πάνω σελίδα στο συμβάν κλικ

Όταν ένας χρήστης ξεκινά μια αίτηση AJAX σε μια σελίδα είναι χρήσιμο να δείξει κάποιο είδος «εργασίας» ή απασχολημένος εικονίδιο ή πρόοδο δείκτη. Εάν υπάρχει μόνο μία μακροχρόνια διαδικασία αυτή μπορεί να αντιμετωπιστεί με σχετικά απλό τρόπο:

function do_action() {
   show_busy_icon();       

   long_running_asynchronous_process(function() {
      // Callback function run when process finishes
      hide_busy_icon();
   });
}

Ωστόσο, αν οι πολλαπλές ασύγχρονη διεργασίες που εκτελούνται στη σελίδα, χρησιμοποιώντας on / off μέθοδοι δεν θα μπορούσε να λειτουργήσει. Η πρώτη διαδικασία να τελειώσει σβήνει το εικονίδιο, ακόμη και αν υπάρχουν πρόσθετες διεργασίες που τρέχουν.

Έτσι, πώς θα χειριστεί την εμφάνιση ενός δείκτη, σε μια ιστοσελίδα, δηλαδή όταν υπάρχουν μία ή περισσότερες διεργασίες που τρέχουν, και σβήνει όταν υπάρχουν δεν υπάρχουν διεργασίες που τρέχουν;

Φαντάζομαι ότι θα ήταν δυνατό να διατηρηθεί μια καταμέτρηση του αριθμού των διεργασιών που εκτελούνται. hide_busy_icon()κρύβει μόνο το εικονίδιο αν ο αριθμός διαδικασία είναι 0. Αυτό φαίνεται κάπως επιρρεπής σε αποτυχία. Ίσως υπάρχει μια καλύτερη / πιο απλό τρόπο που δεν βλέπω.

Ευχαριστώ για τις ιδέες και τις προτάσεις σας!

Επεξεργασία: Μετά από την εργασία με την λύση στην έντονη απάντηση για μια στιγμή, είμαι στην ευχάριστη θέση να πω ότι λειτουργεί πολύ καλά. Το μόνο πρόβλημα που έχω τρέξει σε περιπτώσεις που είναι δικά μου σενάρια καλούν τις λειτουργίες των σεναρίων που δεν ελέγχουν. Εκτός και αν αυτές οι λειτουργίες επιτρέπουν επιστροφές κλήσης που πρέπει να παρέχονται δεν υπάρχει κανένας τρόπος για να ενημερώσετε τη διαδικασία καταμέτρησης όταν αρχίζουν και τέλος.

Ένα παράδειγμα όπου συμβαίνει αυτό κονσέρβα είναι προσθέτοντας ένα σύνολο δεικτών σε ένα χάρτη Google. Μόλις το σενάριό μου καλεί τους χάρτες της Google λειτουργεί το εικονίδιο απασχολημένος εξαφανίζεται, ενώ οι δείκτες εξακολουθούν να φορτωθεί.

Δεν είμαι βέβαιος για ένα καλό τρόπο για να χειριστεί αυτό.

Δημοσιεύθηκε 09/12/2008 στις 19:28
πηγή χρήστη
Σε άλλες γλώσσες...                            


6 απαντήσεις

ψήφοι
8

Αν θέλετε το ίδιο απασχολημένος δείκτης για όλες τις δράσεις, στη συνέχεια, χρησιμοποιήστε ένα μετρητή.

Αντί για "show_busy_icon ()", κάνει μια "increment_busy_count ()", το οποίο αποκαλεί "show_busy_icon ()" όταν είναι κατειλημμένο καταμέτρηση πηγαίνει από 0 έως 1. Αντί του "hide_busy_icon ()", κάνει μια "decrement_busy_count ()", η οποία ζητά «hide_busy_icon ()» όταν είναι κατειλημμένο καταμέτρηση πηγαίνει από 1 σε 0.

Απαντήθηκε 09/12/2008 στις 19:47
πηγή χρήστη

ψήφοι
1

Πρωτότυπο έχει αυτό το ενσωματωμένο? μια ιδιότητα που ονομάζεται Ajax.activeRequestCountπαρακολουθεί τον αριθμό των αιτήσεων είναι ενεργά σε κάθε δεδομένη στιγμή. Επίσης, θα σας αφήσει να δημιουργήσει παγκόσμια ανταποκρίθηκαν Ajax για να καθορίσει εάν θα αποκρύψετε ή να εμφανίσετε το «απασχολημένος» εικονίδιο.

Απαντήθηκε 09/12/2008 στις 21:34
πηγή χρήστη

ψήφοι
1

Νομίζω ότι το πρόβλημα είναι πραγματικά ότι χρησιμοποιείτε μόνο ένα δείκτη. Μπορεί να είναι πιο εύκολο να έχουμε μια ένδειξη για κάθε ενέργεια που χρειάζεται ένα.

Έτσι, εάν έχετε πολλές αναζητήσεις σε μια σελίδα κάθε περιοχή αναζήτησης θα έχει το δικό του ανεξάρτητο δείκτη αυτό που εμφανίζεται ή κρύβεται στις κατάλληλες λειτουργίες javascript.

Απαντήθηκε 09/12/2008 στις 19:40
πηγή χρήστη

ψήφοι
0

Είμαστε όλοι αναζητούν σε αυτό το λάθος τρόπο. Οι Ajax κλήσεις που χρησιμοποιούνται για τη φόρτωση του περιεχομένου με τη χρήση του XHR. Αυτό σημαίνει ότι πρέπει να υπάρχει κάποια προκαθορισμένο στοιχείο σε ολόκληρο το DOM όπου φορτώνεται το περιεχόμενο εκεί. πούμε ότι έχουμε ένα html αυτού του τύπου:

<html>
<body>
   <div id="content_1">
   </div>
   <div id="content_2">
   </div>
</body>
</html>

Χρησιμοποιώντας jQuery, λέμε ότι θέλουμε να φορτώσει σε content_1 και content_2 από content_1.php και content_2.php αντίστοιχα.

Χρησιμοποιήστε την ακόλουθη δέσμη ενεργειών για να χειριστεί το ajax ::

$("content_1").html("<img src='loading.gif'>").load("http://samplesite.com/content_1.php");

$("content_2").html("<img src='loading.gif'>").load("http://samplesite.com/content_2.php");

Αυτό θα τοποθετήσει ένα GIF φόρτωσης στις αντίστοιχες divs και η GIF θα αντικατασταθεί αργότερα από το φορτωμένο περιεχόμενο από την php. Απλό σενάριο μιας γραμμής. Δεν μετρητή απαιτείται.

Απαίτηση: κάθε τελευταία έκδοση του jQuery.

Απαντήθηκε 31/12/2012 στις 10:18
πηγή χρήστη

ψήφοι
0

Προτείνω μια διαφορετική λύση. αυτό δεν έχει δοκιμαστεί κώδικα, κατά πάσα πιθανότητα δεν θα λειτουργήσει, αλλά είναι μια απεικόνιση της έννοιας.

Υποθέτω ότι το ίδιο excact ενέργεια δεν εκτελείται σε πολλές περιπτώσεις. Το κάνω αυτό για να διασφαλιστεί ότι τα χρονικά όρια ή παρόμοια προβλήματα στην επικοινωνία δεν κολλάει το δείκτη, αλλά επιτρέπει την ένδειξη που πρέπει να επιλυθούν όταν αποκατασταθεί επικοινωνία

 var actionRegister = new Array();

 function register_action(actionId)
 {
     show_busy_icon();       
     if(blockedTile.indexOf(actionId) != -1)
     {  // element already registered
        return;
     }
     actionRegister.push(actionId)
}


function unregister_action(actionId)
{
    var idx = blockedTile.indexOf(actionId);
    if(idx  != -1)
    {  
        actionRegister.splice(idx,1);
    }

    if(actionRegister.length < 1)
    {
       hide_busy_icon();
    }
}
Απαντήθηκε 18/04/2012 στις 10:03
πηγή χρήστη

ψήφοι
0

Παρακαλώ δείτε την απάντησή μου εδώ:

Πώς να εμφανίσετε μια οθόνη φόρτωσης, ενώ φορτώνει το περιεχόμενο του ιστοτόπου

Δίνω ένα μικρό, λειτουργικό παράδειγμα την Javascript για το πώς να κάνει ακριβώς αυτό, ελπίζω ότι βοηθά.

Απαντήθηκε 09/12/2008 στις 19:40
πηγή χρήστη

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more