jQuery Callback(回调函数)使用示例

实践记录 专栏收录该内容
34 篇文章 0 订阅

很多时候我们在页面完成一些动作后希望再执行一些其它小动作,如完成某段动画后弹出提示信息,又或者在后台请求返回成功后弹出提示信息,关闭提示信息后再刷新当前页面,等等。

示例代码:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>jQuery callback 回调函数</title>
    <script type="text/javascript" src="js/jQuery/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="js/jquery-easyui/jquery.easyui.min.js"></script>

    <link rel="stylesheet" type="text/css" href="js/jquery-easyui/themes/gray/easyui.css">
    <link rel="stylesheet" type="text/css" href="js/jquery-easyui/themes/icon.css">
    <script type="text/javascript">
        $(document).ready(function () {
            $("#btn_no_callback").click(function () {
                $.messager.alert("没有回调函数效果,一闪而过!");
                window.location.reload();
            })
            $("#btn_callback").click(function () {
                $.messager.alert("window","有回调函数效果","info",function () {
                    window.location.reload();
                })
            })
        })

        function load() {
            alert("Hello!页面刷新了!");
        }
    </script>
</head>
<body onload="load();">

<input id="btn_no_callback" type="button" value="没有回调"/>
<input id="btn_callback" type="button" value="有回调"/>
</body>
</html>  

通过上述示例,我们可以直观的感受到,由于javascript代码执行是逐行进行的,所以未采用回调函数的效果是当弹出框还未确认时就由于执行了页面重载导致弹出框一闪而过的消失了。

  • 1
    点赞
  • 0
    评论
  • 1
    收藏
  • 打赏
    打赏
  • 扫一扫,分享海报

参与评论 您还未登录,请先 登录 后发表或查看评论
©️2022 CSDN 皮肤主题:像素格子 设计师:CSDN官方博客 返回首页

打赏作者

Droy`Z

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值