javascript 仅在断点处执行

Question

我对 JS 和 jQuery 有一个非常奇怪的问题。

$('#skip').click(function(e) {
   savePhoto('skip');
   showNextPlace();
   photo_changed = 0;
   return false;
});

showNextPlace() 和 photo_changed = 0; 仅在我添加断点时执行。 savePhoto(); 的代码非常基本。我根据位置数组中的状态和元素数量提交请求。

function savePhoto( status )
  {
      if ( places.length <= 5 )
      {
          // load more places
          $('#loadmore').val('1');
      }

      // Don't send a request on skip unless we need more places
      if ( status != 'skip' || $('#loadmore').val() == 1 )
      {
          $.ajax({
              url: "url" + status,
              cache: false,
              data: $('#form_photo').serialize(),
              success: function(results){
                  // dont load more places until we have few
                  $('#loadmore').val('0');

                  if ( results != '[]' )
                  {
                      for ( var i in results )
                      {
                          places.push( results[i] );
                      }
                  }
              }
          });
      }
  }

知道为什么会发生这种情况或者如何更好地调试问题吗？

Answer 1

异步 XHR 调用

$.ajax({ ... })

可能在断点存在时到达，但如果不使用断点运行，则到达该代码时 XHR 请求仍在进行中。

也许您应该对 $.ajax 调用进行回调，以在地点加载后显示下一个地点。

如果布尔值 needsToShowNextPlace 为 true，则可以让 $.ajax 处理程序调用 showNextPlace，并让 showNextPlace 设置该布尔值（如果在存在时调用）没有下一个可以显示的地方。

Answer 2

由于 $.ajax 调用是异步的，您应该将代码放入 success 处理程序中，如下所示：

success: function(results){
  // dont load more places until we have few
  $('#loadmore').val('0');
  if ( results != '[]' )
  {
      for ( var i in results )
      {
          places.push( results[i] );
      }
  }
   showNextPlace(); //Moved here
   photo_changed = 0; //Moved here  
}

因此您的点击绑定将是：

$('#skip').click(function(e) {
   savePhoto('skip');
   return false;
});

它不起作用，因为，您的原始代码 showNextPlace() 和 photo_changed=0 在 savePhoto('skip') 完成执行之前执行。 （那是异步的）。它可以使用断点，因为它给了 savePhoto() 足够的时间来完成。

希望这有帮助。干杯

Answer 3

该问题与 AJAX 调用无关。在代码的另一部分中，每次用户按下保存按钮时，我都会将一个事件绑定到图像字段（因此第二次执行代码 2 次，第三次执行 3 次，等等。）请记住取消绑定！

此外，作物的某些部分和部分即使我单击“跳过”，保存插件也会被执行，因此我添加了一些控制变量。

解决方案：在逻辑可以走的每条路径上使用console.log()。