Question

我有一堆抽搐频道，其名称为ID，并希望将正确的状态记录到频道并保持在＆＃34;离线＆＃34;如果我没有得到结果。一切正常，除了哪个频道获得哪个状态几乎是随机的，大多数情况下最后一个频道是受影响的唯一一个。如何让.ajax一次只执行一个请求？（我已经尝试过async：false）

$(document).ready(function() {
  var names = [];
  var status = 'Offline';
  var iconColor = "#B00";

  $('.channel').each(function(index) {
    names.push($(this).attr('id'));
  });

  $(".channel").each(function(index) {
    iconColor = "#B00";
    $(this).html('<div class="iconStatus col-md-1"><i class="fa fa-television" aria-hidden="true"></i></div><a href="https://www.twitch.tv/' + names[index] + '"><div class="nameChannel col-md-3"></div></a><div class="status col-md-8">Offline</div>');
    $(this).children("a").children(".nameChannel").text(names[index]);
    $.ajax({
      url: 'https://wind-bow.glitch.me/twitch-api/streams/' + names[index],
      dataType: 'jsonp',
      type: 'GET',
      async: false,
      jsonpCallback: 'JSON_CALLBACK',
      success: function(data) {
        if (data.stream !== null) {
          assignProps(names[index], data.stream.channel.status, '#0B0');
        }
      }
    });
  });
});

function assignProps(name, status, iconColor) {
  $('#' + name).children('.status').text(status);
  $('#' + name).children('.iconStatus').children('i').css('color', iconColor);
};

Answer 1

我删除了异步和jsonpCallback。原因是，对于异步，请求将冻结浏览器的请求时间。 jsonpCallback由jQuery维护，因此无需设置它。

我将names从onload处理程序移到了全局作用域，并添加了nameIndex以跟踪接下来要获取流数据的名称。

然后，我没有为第二个$(".channel").each(function(index)中的每个频道调用ajax，而是根据fetchStream创建了names函数，用于nameIndex的下一个名称它会在最后一个ajax请求的complete处理程序上调用自己，这意味着它将在error或success上调用自己。您可能希望自己处理error以减少nameIndex，并且调用fetchStream将再次请求相同的索引，但如果每次都发生错误，请注意不要陷入无限循环。

＆＃13;

var names = [];
var nameIndex = 0;

$(document).ready(function() {
  var status = 'Offline';
  var iconColor = "#B00";

  $('.channel').each(function(index) {
    names.push($(this).attr('id'));
  });

  $(".channel").each(function(index) {
    iconColor = "#B00";
    $(this).html('<div class="iconStatus col-md-1"><i class="fa fa-television" aria-hidden="true"></i></div><a href="https://www.twitch.tv/' + names[index] + '"><div class="nameChannel col-md-3"></div></a><div class="status col-md-8">Offline</div>');
    $(this).children("a").children(".nameChannel").text(names[index]);
  });
  
  fetchStream();
});

function fetchStream(){
  if(nameIndex < names.length){
    var name = names[nameIndex];
    console.log('Fetching for ' + name);
    $.ajax({
      url: 'https://wind-bow.glitch.me/twitch-api/streams/' + name,
      dataType: 'jsonp',
      type: 'GET',
      success: function(data) {
        if (data.stream !== null) {
          assignProps(name, data.stream.channel.status, '#0B0');
        }
      },
      complete: function(){
        fetchStream();
      }
    });
    
    nameIndex++;
  } else {
    console.log('Finished');
  }
}

function assignProps(name, status, iconColor) {
  $('#' + name).children('.status').text(status);
  $('#' + name).children('.iconStatus').children('i').css('color', iconColor);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="channel" id="lirik"></div>
<div class="channel" id="yuuhi"></div>
<div class="channel" id="esl_overwatch"></div>

＆＃13;

如何让我的ajax函数逐个处理请求？

1 个答案: