多个ajax请求的速率限制

Question

I'm trying to ratelimit my ajax requests in order to remain within api limits. I make one request to my server which returns a list of data. From that list of data, I make a request to an api which does not allow receiving more than one request per second. How can I use setTimeout or a similar function to limit my requests?

myArray = ['1','2','3'];

function f1(){
    for (var num in myArray){
        $.ajax({
            type: "POST",
            url: "backend.php",
            data: {suburbs : num}, 
            success: function(data){
                for (var item in data){
                    f2(data[item])
                }
            }
        });
    }
}

function f2(text) {
    $.getJSON("http://example.com/test.html?" + text, null, function (data) {
        console.log(data)
    }
}

Answer 1

Just create a list of functions:

var duration = 1000; // API duration
var expectAsync = 3000; // time to wait for new functions;
var lastCall = Date.now();
var myArray = ['1','2','3'];
function queryArray() {
  var fnList = [];
  myArray.forEach(function(v){
    fnList.push( function() { // push f1 to list;
       $.ajax({
        type: "POST",
        url: "backend.php",
        data: {suburbs : v}, 
        success: function(data){
            fnList.push(function(){ // push f2, after we get response;
              for (var item in data){
                f2(data[item]);
              }
            })

        }
    })
  });
  // here we go;
  var int;
  int = setInverval(function(){
    if(fnList.length){
      var fn = fnList.shift(); // pop first function from left;
      fn();
    }else{
      if((Date.now() - lastCall) > expectAsync) clearInterval(int); 
    }
    lastCall = Date.now();
  }, duration);
}

Answer 2

setTimeout does not work like java's sleep. It is asynchronous with a callback. After the time is up, the callback function get triggered, which means that you want to put your request into the callback function.

myArray = ['1','2','3'];

function f1(){
    for (var i = 0; i < myArray.length; i++){
        $.ajax({
            type: "POST",
            url: "backend.php",
            data: {suburbs : myArray[i]}, 
            success: function(data){
                for (var j = 0; j < data.length; j++){
                    setTimeout(function() {
                       f2(data[j]);
                    }, (i*data.length + j)*1000);
                }
            }
        });
    }
}

In the for loop, you need to use the index to determine how long you need to wait. After the request is triggered.