当我删除“alert()”时，我的代码停止工作

Question

我有一个非常奇怪的（无论如何对我来说）javascript 问题。我正在开发一个页面，在此过程中，我输入了几行警告代码来帮助我进行调试。然后，我让一切正常。呜呼，对吧？没那么快。一旦我取出警报（代码没有其他更改），我的代码就会失败。该变量以未定义的形式返回。我想不出任何合乎逻辑的理由会导致这种情况。谁有想法？这是相关代码...以下工作，但当然会弹出警报：

function videoDone() {
$.ajax({url:"getNextTrack.php",success:function(result){

  foo = result;
   }});
   alert(foo);
    document.getElementById("myVideo").src = foo;

上面的代码运行良好。它通过 jquery ajax 加载下一首曲目，并将视频源设置为该曲目。快乐的时光。但是，如果我只删除警报并将代码更改为：

function videoDone() {
$.ajax({url:"getNextTrack.php",success:function(result){

  foo = result;
   }});

    document.getElementById("myVideo").src = foo;

然后 foo 返回未定义。这对我来说没有意义。没有其他任何改变

Answer 1

在脚本中，代码进行 Ajax 调用，这是一个异步调用，这意味着您的代码在调用期间继续执行。在代码中，document.getElementById... 行取决于 Ajax 调用返回的数据。如果警报不存在，则在 ajax 调用完成之前调用 document.getElementBy.. 语句。

在适当的位置，警报会暂停调用足够长的时间以完成 ajax 调用。当您删除警报时，获取元素并设置 src 属性的调用会在 Ajax 调用返回之前执行。这会导致 foo 未定义。

只需在 ajax 调用完成后执行的回调函数中包含设置src 属性的代码。

function videoDone() {
$.ajax({url:"getNextTrack.php",success:function(result){
    document.getElementById("myVideo").src = result;
 }});

简而言之，发生了什么：

没有警报

1. Ajax 调用触发
2. document.getElementById... 执行，抛出错误
3. Ajax 调用返回

有警报

1. Ajax 调用触发
2. 显示警报窗口，暂停代码执行
3. Ajax 调用返回填充所需的变量
4. document.getElementById... 执行，没有错误

Answer 2

Ajax 调用是异步的，因此代码将继续运行。因此，在您的第一个示例中， foo 有时间由“结果”设置，但在您的第二个示例中，它没有时间，因为 .src 是在之后直接设置的。

试试这个：

function videoDone() {
$.ajax({url:"getNextTrack.php",success:function(result){

  foo = result;
  document.getElementById("myVideo").src = foo;
}});