Question

好的，我对jquery和Javascript很新。我正在阅读关于w3school的回调，它给出了两个例子。

例1：

$("button").click(function(){
  $("p").hide("slow",function(){
    alert("The paragraph is now hidden");
  });
});

例2：

$("button").click(function(){
  $("p").hide(1000);
  alert("The paragraph is now hidden");
});

据我所知，在第一种情况下，只有在hide（）函数完成后才会执行警报。但是在第二个示例中，可能会在隐藏完成之前执行警报。这在我的理解中引起了一些混乱。例如，在下面的情况下，alert('hey')可能会在它之前的警报（一个用数学计算）之前执行。

$("button").click(function(){
  alert(1+2+(3*4)..blah..blah);
  alert('hey');
});

或在这种情况下..

$("button").click(function(){
  fn1();
  fn2();
});

function fn1(){
    for(var i=0;i<100;i++){
 $('table').append(blah);
        }
}
function fn2(){
alert('hey');  
}

在fn1完成追加之前，是否有可能出现“嘿”？如果是这样，我需要将每个东西都写成回调??

Answer 1

回答你的问题：不。

关键是某些javascript函数是异步。这些实际上只有两个常见的类别：

XmlHttpRequest（即AJAX）调用，浏览器进入网络以获取某些内容，并允许脚本在收集响应时继续运行。
超时和间隔，您告诉浏览器在延迟后调用某些代码。脚本将继续畅通无阻，然后，当时间到来时，超时代码将运行。

在您的示例中：

$("p").hide("slow",function(){
   alert("The paragraph is now hidden");
});

jQuery中的hide函数是基于超时的。因此，您的脚本不必等待动画完成才能开始其业务。 jQuery提供了一个回调参数，因此您可以根据需要选择在动画完成后发生某些事情。

所以在这个例子中：

$("button").click(function(){
   $("p").hide(1000);
   alert("The paragraph is now hidden");
});

在隐藏完成之前说警告“可能”执行是错误的。除非您的代码执行速度太慢以至于要显示警报需要超过1整秒，否则将在隐藏完成之前执行。 1000ms是一行javascript的永恒。

$("button").click(function(){
   alert(1+2+(3*4)..blah..blah);
   alert('hey');
});

在这个例子中，没有关于代码的异步。 alert是一个所谓的blocking调用，这意味着在您关闭警报之前，脚本中没有任何操作。因此，您可以保证警报将按顺序显示，无论您制作参数的复杂程度如何。

实际上，参数的复杂性没有影响，因为在将结果字符串传递给alert函数之前，它将完全评估。

很长一段时间，除非您正在使用Ajax，setTimeout和setInterval，或使用第三方库（应记录其行为），否则您的代码将按顺序执行。

Answer 2

没有。 alert()在示例2中首先出现的原因是因为hide()调用是异步的。 hide()函数被触发，但这有1000毫秒的延迟。 alert()之后立即被触发，而不是之后的1000毫秒，因此alert()似乎先被点燃。

在示例1中，alert()仅在hide()完成时触发，因为它使用回调函数。

Answer 3

不可能，对于函数，JavaScript逐行执行但是一次性执行，但是在给出第二个结果之后返回第一个结果！但是对于另一个例子，很明显hide（）需要花费更长的时间来提供所请求的响应，而警报是一个内置功能的浏览器，这就是为什么警告在隐藏之前似乎正在工作的原因（），我不知道做这些事情的确切时间，但是如果你谷歌它，你也可以学习它们，如果你需要的话！

BTW当一个alert（）弹出时，它会关闭整个javascript代码，只是为了让你知道。 ;）

Answer 4

在Javascript中使用alert或confirm时，浏览器会强制进入同步（现有或同时发生）进程，其中所有内容（甚至是另一页的加载）都会停止，直到用户驳回对话。

因此，当您发出警告时，浏览器将停止执行其他功能。

但是jQuery hide和其他动画函数是异步的（不同时存在），因此浏览器无需等待即可转到下一行。

对于前。

$(document).ready(function(){
  fn1();
  fn2();
});

function fn1(){
    for(var i=0;i<100;i++){
 $('body').append("<div>blah</div>");
        console.log("blah!");
        }
}
function fn2(){
console.log("Hey!");
}

当浏览器等待hey完成时，blah（100次）之后会记录f1()。

<小时/> DEMO

但是如果你尝试类似的东西：

$(document).ready(function(){
  fn1();
  fn2();
});

function fn1(){
    for(var i=0;i<100;i++){
if(i%10==0)
{
fn2();
    alert(true);
}
        console.log("blah!");
        }
}
function fn2(){
console.log("Hey!");
}

然后alert将显示其工作方式。

同样在jQuery中：

$("p").hide("slow",function(){
    // This is the call back function and not others.
  });

当任何异步或同步功能首先执行其任务时，将执行回调。

这个javascript / Jquery代码的执行顺序是什么？

4 个答案: