Question

我有一个设置，其中包含类似数据（但排名不同）的div需要在启动时动态加载数据。为此，我通过AJAX加载一个PHP页面并传递一个参数，以便它知道要查询的等级。但是为了加载启动，我需要连续4次调用相同的函数。这种语法是否正确？或者有没有办法在没有相同函数的大列表的情况下编写它

$(document).ready(function(){
    getStuff(1);
    getStuff(2);
    getStuff(3);
    getStuff(4);
});
function getStuff(type) {
    $.ajax({
       type: "GET"
       ..........
       success: function(html) {
          $('[data-id="' + type + '"]').html(html);
       }
    });
}


<div id="rank1" data-id="1"></div>
<div id="rank2" data-id="2"></div>
<div id="rank3" data-id="3"></div>
<div id="rank4" data-id="4"></div>

Answer 1

$(document).ready(function(){

  // edit as per taseenb@ comment for performance
  var size = $("div[id^=rank]").size()

  for(var i = 1; i <= size; i++){
    getStuff(i);
  }
});

Answer 2

当然有一种方法，它被称为循环：）

$(document).ready(function(){
    for(i = 1; i < 5; i++){  
       getStuff(i);
    }
});

Answer 3

为什么不让getStuff获取一个数组并在循环中进行AJAX调用？

另外，需要考虑的事项：AJAX是异步的（如名称所暗示的那样），因此无法保证这些调用将以您制作它们的顺序返回。如果你需要它们按顺序发生，你应该递归地进行调用 - 从前一个调用的SUCCESS函数进行每个后续调用。这样你就可以保证在下一次通话之前完成上一次通话。

Answer 4

通过[attribute]选择器进行选择，通过$.each()进行迭代：

$('[data-id]').each(function(){

  var $this = $(this);

  $.get( '/some/url' {
     ..........
  }).done(function(html){

    $this.html(html);

  });  

})

Javascript + jQuery调用相同的函数4次正确吗？

4 个答案: