在重復 jQuery / Ajax function 中設置延遲

Question

我正在嘗試為可重復查詢添加延遲。

我發現.delay 不是在這里使用的。 相反，我應該使用 setInterval 或 setTimeout go。 我都試過了，沒有任何運氣。

這是我的代碼：

<?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>

該代碼工作正常，它按要求輸出結果。 它只是加載沒有延遲。 超時和/或間隔似乎不起作用。

有人知道我做錯了什么嗎？

Answer 1

我永遠不明白為什么人們總是間隔地添加他們的AJAX請求，而不是讓成功的AJAX調用只是自己調用，同時冒着嚴重的服務器負載通過多個請求而不僅僅是在你成功回來后再打電話。

有鑒於此，我喜歡編寫解決方案，其中AJAX調用只是在完成時調用自己，如：

// 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);
        }
    });
}

我希望這是有道理的！ :)

更新：

在再次審閱之后，我注意到原始問題中的PHP代碼中也存在一個問題，我需要澄清和解決。

雖然上面的腳本將創建AJAX之間的延遲工作的重大要求，在原來的崗位加入到PHP代碼的腳本將只是echo倒是出多次行的SQL查詢選擇的數量，創建多個功能具有相同的名稱，可能同時進行所有AJAX調用......根本不是很酷......

考慮到這一點，我提出了以下附加解決方案 - 使用PHP腳本創建一個array ，該array可以被JavaScript一次消化，以實現所需的結果。 首先，PHP構建JavaScript數組字符串......

<?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"]
?>

接下來，JavaScript來消化和處理我們剛創建的數組......

// 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);
                       }
        });
    }
}

Answer 2

注意：Chris Kempen的答案（上圖）更好。 請使用那個。 他在AJAX例程中使用了這種技術 。 請參閱此答案 ，了解使用setTimeout優於setInterval的原因。

---

//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()

Answer 3

我已經設計了一個包裝器方法 ，它在默認的$.ajax方法的基礎上添加了一個自定義延遲。 這是一種在整個應用程序中（在所有 jQuery ajax調用上）延遲的方法。

在模擬真實的隨機延遲方面非常方便。

(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;
  }
})();

使用示例：

// 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();

Answer 4

 var takeInput=true;
  $('#searchDrug').on('input',function() {
     if(!takeInput){return false;}
     takeInput=false;
     var timer = setTimeout(function() {
         $.ajax({
            type: 'POST',
            url: "{{route('AjaxSearchDrug')}}",
            data: {
               _token: '<?php echo csrf_token() ?>',
               'searchkeyword': searchkeyword,
            },
            success: function (data) {
                //do some logic then let keys be effective once more
                takeInput=true;
            }
        });
     }, 700);