it-swarm.com.de

Legen Sie eine Verzögerung in einer sich wiederholenden jQuery/Ajax-Funktion fest

Ich versuche, einer wiederholbaren Abfrage eine Verzögerung hinzuzufügen.

Ich habe herausgefunden, dass .delay hier nicht verwendet wird. Stattdessen sollte ich setInterval oder setTimeout verwenden. Ich habe beides versucht, ohne Glück.

Hier ist mein Code:

<?php 
include("includes/dbconf.php");

$strSQL = mysql_query("SELECT workerID FROM workers ORDER BY workerID ASC");
while($row = mysql_fetch_assoc($strSQL)) {
?>
<script id="source" language="javascript" type="text/javascript">

  $(setInterval(function ()
  {
    $.ajax({                                      
      cache: false,
      url: 'ajax2.php',        
      data: "workerID=<?=$row['workerID'];?>",
      dataType: 'json',    
      success: function(data)
      {
        var id = data[0];              //get id
        var vname = data[1];           //get name
        //--------------------------------------------------------------------
        // 3) Update html content
        //--------------------------------------------------------------------
        $('#output').html("<b>id: </b>"+id+"<b> name: </b>"+vname);
      } 
    });
  }),800); 

  </script>
<?php
}
?>
<div id="output"></div>

Der Code funktioniert gut, er gibt das Ergebnis wie gewünscht aus. Es wird einfach ohne Verzögerung geladen. Das Zeitlimit und/oder das Intervall scheinen nicht zu funktionieren. 

Weiß jemand was ich falsch mache?

10
Jeroen

Ich habe nie verstanden, warum die Leute ihre AJAX - Anforderungen immer in Intervallen hinzufügen, anstatt die erfolgreichen AJAX - Aufrufe einfach selbst aufrufen zu lassen. Dabei besteht die Gefahr, dass die Serverlast durch mehrere Anfragen stark gefährdet wird und nicht nur ein weiterer Anruf erfolgt du hattest einen erfolgreichen zurückgekommen.

In dieser Hinsicht schreibe ich gerne Lösungen, bei denen sich die AJAX -Aufrufe nach Fertigstellung einfach selbst aufrufen, etwa:

// set your delay here, 2 seconds as an example...
var my_delay = 2000;

// call your ajax function when the document is ready...
$(function() {
    callAjax();
});

// function that processes your ajax calls...
function callAjax() {
    $.ajax({
        // ajax parameters here...
        // ...
        success: function() {
            setTimeout(callAjax, my_delay);
        }
    });
}

Ich hoffe das macht Sinn! :)

Aktualisieren:

Nachdem ich dies noch einmal durchgesehen hatte, wurde ich darauf aufmerksam gemacht, dass es auch im Code PHP der ursprünglichen Frage ein Problem gab, das ich klären und behandeln musste.

Obwohl das obige Skript beim Erstellen einer Verzögerung zwischen AJAX - Aufrufen großartig ist, wird das Skript beim Hinzufügen zum PHP - Code im ursprünglichen Beitrag echo 'so oft ausgegeben wie die Anzahl der Zeilen Die SQL-Abfrage wählt aus, erstellt mehrere Funktionen mit demselben Namen und macht möglicherweise alle AJAX - Aufrufe gleichzeitig ... überhaupt nicht cool ...

Aus diesem Grund schlage ich die folgende zusätzliche Lösung vor: Erstellen Sie eine array mit dem Skript PHP, das von dem JavaScript-Element einzeln verdaut werden kann, um das gewünschte Ergebnis zu erzielen. Zuerst die PHP, um die JavaScript-Array-Zeichenfolge zu erstellen ...

<?php 
    include("includes/configuratie.php");
    $strSQL = mysql_query("SELECT workerID FROM tWorkers ORDER BY workerID ASC");

    // build the array for the JavaScript, needs to be a string...
    $javascript_array = '[';
    $delimiter = '';
    while($row = mysql_fetch_assoc($strSQL))
    {
        $javascript_array .= $delimiter . '"'. $row['workerID'] .'"'; // with quotes
        $delimiter = ',';
    }
    $javascript_array .= ']';
    // should create an array string, something like:
    // ["1","2","3"]
?>

Als Nächstes das JavaScript zum Verdauen und Verarbeiten des soeben erstellten Arrays ...

// set your delay here, 2 seconds as an example...
var my_delay = 2000;

// add your JavaScript array here too...
var my_row_ids = <?php echo $javascript_array; ?>;

// call your ajax function when the document is ready...
$(function() {
    callAjax();
});

// function that processes your ajax calls...
function callAjax() {
    // check to see if there are id's remaining...
    if (my_row_ids.length > 0)
    {
        // get the next id, and remove it from the array...
        var next_id = my_row_ids[0];
        my_row_ids.shift();
        $.ajax({
            cache    : false,
            url      : 'ajax2.php',
            data     : "workerID=" + next_id, // next ID here!
            dataType : 'json',
            success  : function(data) {
                           // do necessary things here...
                           // call your AJAX function again, with delay...
                           setTimeout(callAjax, my_delay);
                       }
        });
    }
}
25
Chris Kempen

Anmerkung: Chris Kempens Antwort (oben) ist besser. Bitte verwenden Sie diese. Er verwendet diese Technik innerhalb der Routine AJAX. In diese Antwort finden Sie, warum setTimeout gegenüber setInterval vorzuziehen ist.


//Global var
is_expired = 0;

$(function (){

    var timer = setInterval(doAjax, 800);

    //At some point in future, you may wish to stop this repeating command, thus:
    if (is_expired > 0) {
        clearInterval(timer);
    }

}); //END document.ready

function doAjax() {
    $.ajax({                                      
        cache: false,
        url: 'ajax2.php',        
        data: "workerID=<?=$row['workerID'];?>",
        dataType: 'json',    
        success: function(data) {
            var id = data[0];              //get id
            var vname = data[1];           //get name
            //--------------------------------------------------------------------
            // 3) Update html content
            //--------------------------------------------------------------------
            $('#output').html("<b>id: </b>"+id+"<b> name: </b>"+vname);
        }
    }); //END ajax code block
} //END fn doAjax()
1
gibberish

Ich habe eine Wrapper-Methode entwickelt , die eine benutzerdefinierte Verzögerung on-top der Standard-$.ajax-Methode hinzufügt. Dies ist ein Weg, um (bei all jQuery-Ajax-Aufrufen) eine Verzögerung in Ihrer gesamten App zu haben. 

Sehr praktisch bei der Simulation realer Zufallslatenz.

(function(){
  $._ajaxDelayBk = $.ajax; // save reference to the "real" ajax method

 // override the method with a wrapper
  $.ajax = function(){
    var def = new $.Deferred(),
        delay = typeof $.ajax.delay == 'undefined' ? 500 : $.ajax.delay, 
        delayTimeout,
        args = arguments[0];

    // set simulated delay (random) duration
    delayTimeout = setTimeout(function(){
      $._ajaxDelayBk(args)
        .always(def.resolve)
        .done(def.resolve)
        .fail(def.reject)
    }, delay);

    def.abort = function(){
        clearTimeout(delayTimeout);
    };

    return def;
  }
})();

Anwendungsbeispiel:

// optional: set a random delay to all `ajax` calls (between 1s-5s)
$.ajax.delay = Math.floor(Math.random() * 5000) + 1000;

var myAjax = $.ajax({url:'http://whatever.com/API/1', timeout:5000})
  .done(function(){ console.log('done', arguments) })
  .fail(function(){ console.log('fail', arguments) })
  .always(function(){ console.log('always', arguments) })

// Can abort the ajax call
// myAjax.abort();
0
vsync