Question

jquery的hide()方法的动画效果问题？

<script type="text/javascript">
(document).ready(function() {
$("button").click(function() {
$("div").hide(2000,function() {
alert("Hello JavaScript");
});
});
});
</script>
上面代码的效果是以两秒的效果隐藏div后，再执行回调函数，弹出”Hello JavaScript“，那下面这段代码为什么不行？

<script type="text/javascript">
(document).ready(function() {
$("button").click(function() {
$("div").hide(2000);
alert("Hello JavaScript");
});
});
</script>
JS不是单线程吗？ $("div").hide(2000);和 alert("Hello JavaScript");不应是前者执行完了，后者再执行吗？为什么前者的动画效果还没执行完，就执行后面的代码，难道是JS碰到动画之类效果的时候是抛给别的线程执行的，它自身不执行渲染之类的效果，所以它就立即执行后面的代码。

Answer 1

jquery的hide()方法的定义和用法：

如果被选的元素已被显示，则隐藏该元素。

实例：

隐藏可见的 <p> 元素：

$(".btn1").click(function(){
  $("p").hide();
});

语法：

$(selector).hide(speed,callback)

Answer 2

不是$("div").hide(2000); 先执行完再执行下面的。
如果效果都连在同一个jquery语句中，是可先执行完一动作，再另一动作。
如$("div").hide(2000).show(2000).(其它的事件等操作);
这样，后面的动作会依次执行。前面执行完后再后面的。

追问

是不是jquery的动画实际上是用setTimeout()实现的。
而setTimeout()就相当于抛出个新的线程。

Answer 3

$("div").hide(2000);
alert("Hello JavaScript");
JS引擎确实是单线程，settimeout也只是模拟出一个假象。就上两行代码是不同步的这和单线程没关系。

追问

是不是jquery的动画实际上是用setTimeout()实现的。
而setTimeout()就相当于抛出个新的线程。

Answer 4

看错了. 你说的是对的JavaScript 语句（指令）是逐一执行的 - 按照次序的。
但方法的执行和效果的显示是可能出现不同步的。
出现你这个问题，是因为方法执行了，但效果还没有完成，就执行了alert方法。

这也是为什么hide，要定义callback方法的意义。
参见W3CSchool对这一问题的介绍：
http://www.w3school.com.cn/jquery/jquery_callback.asp

追问

是不是jquery的动画实际上是用setTimeout()实现的。
而setTimeout()就相当于抛出个新的线程。

追答

js是没有多线程的。 setTimeout只是模拟。 你可以测试一下：
setTimeout(function(){alert(1);},1);
alert(2);
显示时2,1，说明setTimeout是不用等执行完，就可以执行下一句的。