极客教程jQuery回调函数
JavaScript语句总是被逐行执行。然而，由于JQuery的效果需要一些时间来完成，下面几行代码可能会在前面的效果还在执行时被执行。这势必会造成错误和效果与动画的重叠。
为了防止这种情况的发生，JQuery为每个效果提供了一个回调函数。
一旦效果完成，回调（）函数就会被执行。它总是被写在方法的最后一个参数上。
语法:
$(selector).effect_function(speed, callback);
方法:
我们将不使用回调函数，而是尝试用代码来切换一个div元素。同时，我们将使用一个警报（Javascript浏览器警报）来显示回调（）对我们的作用。
示例-1：我们定义一个div，并在div下面添加一个按钮。现在我们用一个简单的JQuery代码使按钮允许DIV隐藏。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Callback function
</title>
<script src=
"https://code.jquery.com/jquery-1.12.4.min.js">
</script>
<style type="text/css">
p {
background: white;
border: 1px green solid;
font-size: 30px;
padding: 30px;
text-align: center;
color: green;
}
button {
background: orange;
border: 1px black dashed;
font-size: 15px;
padding: 10px;
text-align: center;
color: white;
cursor: pointer
}
</style>
<script type="text/javascript">
(document).ready(function() {
("button").click(function() {
// toggle the div, using slideToggle effect.
("p").slideToggle("fast");
//alert outside callback
alert("We didnot use the callback() function :");
('#b').text("Show it!");
});
});
</script>
</head>
<body>
<p>GeeksForGeeks</p>
<button id="b"
type="button">
Hide it!
</button>
</body>
</html>
输出:
Before click:
点击后提醒：
After click:
示例-2：现在我们在slideToggle()内添加回调函数。
查看代码和差异。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Callback function
</title>
<script src=
"https://code.jquery.com/jquery-1.12.4.min.js">
</script>
<style type="text/css">
p {
background: white;
border: 1px green solid;
font-size: 30px;
padding: 30px;
text-align: center;
color: green;
}
button {
background: orange;
border: 1px black dashed;
font-size: 15px;
padding: 10px;
text-align: center;
color: white;
cursor: pointer
}
</style>
<script type="text/javascript">
(document).ready(function() {
("button").click(function() {
("p").slideToggle("fast",
function callback() {
('#b').text("Show it!");
// alert define inside the callback
alert("Now we use the Callback()");
});
});
});
</script>
</head>
<body>
<p>GeeksForGeeks</p>
<button id="b" type="button">Hide the Div</button>
</body>
</html>
输出:
点击前:
点击后提醒：
点击后:
