浅谈jQuery中的callback函数

Callback 函数在当前动画 100% 完成之后执行。
jQuery动画的问题。
许多jQuery函数涉及动画。
这些函数也许会将speed或duration作为可选参数。
例子:$(“p”).hide(“show”)
speed或duration参数可以设置许多不同的值,比如"slow",“fast”,"normal"或毫秒。
实例:
$(“button”).click(function(){
$(“p”).hide(1000)
});

由于JavaScript语句(指令)是逐一执行的-按照次序,动画之后的语句可能会产生错误或页面冲突,因为动画还没有完成。

为了避免这个情况,您可以以参数的形式添加 Callback 函数。

jQuery Callback 函数

当动画 100% 完成后,即调用 Callback 函数。
典型的语法:
$(selector).hide(speed,callback)
callback 参数是一个在 hide 操作完成后被执行的函数。

有callback的情况:

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
  $("p").hide(2000,function(){
  alert("The paragraph is now hidden");
  });
  });
});
</script>
</head>
<body>
<button type="button">Hide</button>
<p>This is a paragraph with little content.</p>
</body>
</html>



第一个实例有回调函数,警告框会在隐藏效果完成后弹出。
没有callback的情况:

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
  $("p").hide(2000);
  alert("The paragraph is now hidden");
  });
});
</script>
</head>
<body>
<button type="button">Hide</button>
<p>This is a paragraph with little content.</p>
</body>
</html>
第二个实例没有回调函数,警告框会在隐藏效果完成前弹出。



发布了74 篇原创文章 · 获赞 27 · 访问量 9507

猜你喜欢

转载自blog.csdn.net/qq_42526440/article/details/102140816