返回false,不为每个循环取消

时间:2015-12-17 14:54:08

标签: javascript jquery ajax for-loop

我正在使用一个函数showVisible()来从googlemap收集所有标记ID,将它们传递给数组,然后使用AJAX从服务器调用相应的对象数据。

只要有人点击地图上的标记群集,就会触发此操作。如果有人在所有的ajax调用之前点击了一个标记,我需要停止循环遍历数组。

我试图使用if语句,以便如果breakAjax是" true"那么循环应该返回false。即使我可以在控制台上看到变量变为true,但它不会触发中断。

该功能的完整代码如下:

function showVisible() {
  visRunning = true
  console.log('show visible')

  $('#objects_list').empty()

  function unique(list) {
    var result = [];
    $.each(list, function(i, e) {
      if ($.inArray(e, result) == -1) result.push(e);
    });
    return result;
  }

  scoots = unique(locStr)
  totalScoots = scoots.length
    //console.log('total scoots ' + totalScoots);
  var scootOutput = 0

  for (var i = 0; i < scoots.length; i++) {
    if (scootOutput === 0) {
      $('#objects_list').empty()
    }
    console.log('breakAjax: ' + breakAjax)

    countManager()


    $.ajax({
      url: 'https://scootapi.stuffstory.com/api/stuff/' + scoots[i],
      dataType: 'json',
      type: "get",
      success: function(stuffData, textStatus, jqXHR) {

        $('#objects_list').append('<a class="stuff_wrapper" target="_blank" onclick="ga("send", "event", "grid view scooter ' + stuffData.id + '", "click", "frontPage")" href="../scooter/?view=' + stuffData.id + '"><div class="stuff_holder" style="background-image:url(' + stuffData.image + '/convert?w=250&h=250);"><div class="scooter_title_sm"><div class="title_wrapper"><div class="scooter_title_1 cursive_sm">' + stuffData.make + '</div><div class="scooter_title_2 lato_sm">' + stuffData.model + '</div><div class="scooter_title_3 cursive_sm">' + stuffData.year + '</div></div></div></div></a>')
        console.log('breakAjax: ' + breakAjax)
        stuffSizer()
        scootOutput++
        if (scootOutput === totalScoots) {
          visRunning = false
        }
      },
      error: function(data, textStatus, jqXHR) {}
    })

    if (breakAjax === "true") {
      return false;
    }

  };
}

1 个答案:

答案 0 :(得分:3)

breakAjax的值在循环内不会改变。

JavaScript是单线程的。

循环内部的代码不能在循环运行时更改该变量的值(无论如何都会瞬间发生)。

您似乎忘记了Ajax中的A代表异步。

您正在遍历循环,进行 n HTTP请求并设置 n 事件处理程序(成功函数),该函数将在获得HTTP响应时运行事件触发。

如果要阻止成功函数对数据执行任何操作,则需要在成功函数内测试breakAjax

此时,要停止发送HTTP请求已经太晚了。如果这是目标,那么您需要重构逻辑(可能使用递归函数),以便您的循环由success处理程序递增,而不是使用for