jQuery-Countdown mit Update

Question

Wir verwenden die folgende Countdown-Funktion auf unserer Bietungsseite.

setInterval(function(){ 
     $(".countdown").each(function(){ 
      var seconds = $(this).data('seconds'); 
      if(seconds > 0) { 
       second = seconds - 1; 
       $(this).data('seconds', second) 
       var date = new Date(null); 
       date.setSeconds(second); 
       $(this).html(date.toISOString().substr(11, 8)) 
      } 
      else 
      { 
       $(this).html("Finished"); 
    alert('finished'); 
      } 
     }); 
    }, 1000); 

passieren wir die Anzahl der Sekunden, wo wir der Zähler erscheinen soll (manchmal mehr als einmal auf unserer Seite:

echo "<div id=\"".$auctionid."\" class=\"countdown\" data-seconds=\"".$diff."\"></div>"; 

Bisher sollte klar sein, ein es funktioniert Jetzt haben wir ein. Situation, wenn jemand irgendwo auf der Website bietet - die verbleibende Zeit für die Auktion verlängert sich um 15 Sekunden, die in mysql geschrieben wird

$ diff Variable wird aus mysql Endzeit berechnet, und es wird an jQuery beim Laden der Seite übergeben.

Die Frage ist, wie die mysql Zeit für diese Auktion zu überprüfen und in jQuery Counter zu synchronisieren? Wir hatten die Idee, vielleicht alle 5 Sekunden zu überprüfen, und nachdem es Null erreicht, um sicherzustellen, dass es vorbei ist? Irgendwelche Vorschläge?

Es sollte für den Benutzer nett aussehen.

EDIT:

Das ist, was wir haben bisher:

$(".countdown").each(function() { 

     var countdown = $(this); 
     var auctionid = $(this).attr('id'); 

      var interval = setInterval(function() { 

         var seconds = countdown.data("seconds"); 

         if(seconds > 0) { 

          var second = --seconds; 
          var date = new Date(null); 
          date.setSeconds(second); 
          countdown.data("seconds", second).html(date.toISOString().substr(11, 8)) 

         } else { 

         //  countdown.html("Finished <img src=\"loading.gif\" class=\"tempload\">"); 

          startUpdateingTimeFromDatabase(auctionid); 

          countdown.html("Finished"); 
          clearInterval(interval); 

         } 

      }, 1000); 

}); 





function startUpdateingTimeFromDatabase(auctionid) { 


      $.getJSON("timer.php?auctionid="+auctionid, function(response) { 
       // console.log(response.seconds); 

        $(".countdown#"+auctionid).data("seconds", response.seconds); 

        if(response.seconds > 0) { 
         // setTimeout(startUpdateingTimeFromDatabase(auctionid), 1000); 
        } else { 

        } 

      }); 


} 

Dieses einfach nicht tut, was wir tun müssen, um. Wir müssen die Sekunden (Abfrage startUpdatingTimeFromDatabase) jedes Mal aktualisieren, wenn sie Null erreicht. Jetzt denke ich, dass es zwei Ansätze gibt. Zuerst geben Sie einfach Sekunden über die Funktion startUpdatingTimeFromDatabase zurück und machen dann alles in der Hauptfunktion, zweitens aktualisieren Sie das div über startUpdatingTimeFromDatabase. Ich denke, zuerst wird es besser, aber ich kann einfach keinen Weg finden, es richtig zu machen.

Jede Hilfe wird geschätzt. Vielen Dank.

Answer 1

Sie speichern die Sekunden in den Elementen data. Also warum nicht die verbleibende Zeit vielleicht über ajax holen und einfach die neuen Sekunden an die Elemente weitergeben? Innerhalb des nächsten Intervalls werden alle Zeiten aktualisiert.

Etwas wie folgt aus:

$.get("yourGetRemainingTimeScript.php", {auctionId: 1}, function(response) { 
    $(".countdown").data("seconds", response.seconds); 
}); 

Wie Sie überprüfen und erhalten die verbleibende Zeit bis zu Ihnen ist. Sie können die Zeit für alle überall wieder einstellen.

$(".countdown").data("seconds", 1337); 

---

Ein weiterer Hinweis von meiner Seite: nicht Schleife alle Elemente mit each im setInterval. Erstellen Sie die Intervalle innerhalb der Schleife einmal. Dann muss Ihr Skript nicht immer wieder jede Sekunde nach den Elementen suchen.

Und löschen Sie das Intervall, wenn es fertig ist.

$(".countdown").each(function() { 
    var countdown = $(this); 
    var interval = setInterval(function() { 
     // do your stuff ... 

     // when finished stop the interval 
     if(finished) { 
      clearInterval(interval); 
     } 
    }, 1000); 
}); 

Full working example.