关于编程中使用setTimeout()的小例子

             作者：李东锋  撰写日期：2019年1月16日

setTimeout()；指定的延迟时间之后执行代码

一般设置了链接有跳转事件后，一旦触发就会立马执行跳转。
为了达到可以让需要显示的信息让用户看到了之后再进行页面的跳转我们需要做个定时器。
原因：setTimeout()；的使用很广泛，也很实用，可以用到。

例如：

 <script>

      function sayHello() {
          var timerTimeout = setTimeout(ABC, 1000);//延迟1秒之后执行
      }
      function ABC() {
            window.location.href = "";
      }

    </script>

    还有一种普通的跳转页面，就是没有使用判断条件只需要点击就跳转的那种，就不需要调用了，直接获取ID 来给个点击跳转的事件就好。
    <script>

        var btnHello = document.getElementById('');
        btnHello.onclike = function(){
        sayHello();
        }

        function sayHello() {
            var timerTimeout = setTimeout(ABC, 1000);//延迟1秒之后执行
       }
       function ABC() {
            window.location.href = "";
       }
    </script>

    这个是延迟2秒钟的，关键在于: setTimeout(ABC, 2000);在”ABC”后设置参数，1000 = 1秒。

下图是页面完成修改的操作：

按正常情况下，如果是修改的话成功以后是会有个提示框的，告诉用户修改是否成功，如下图所示：

这个是不跳转页面的，它会留在原视图。还有一种情况：完成修改之后是不是要回到查询页面呢？这个时候就需要在代码里面加一个链接了：

//修改保存
        $("#saveForm").click(function () {
            var NoticeTypeDetailID = $('#fromNotice [name="NoticeTypeDetailID"]').val();
            var NoticeName = $('#fromNotice input[name="NoticeName"]').val();
            var NoticeContent = ckeditorNoticeContent.getData();
            var Overhead = $('#fromNotice input[name="Overhead"]').prop('checked');
            var New = $('#selectNew').val();
            var noticeCarousel = $('#fromNotice input[name="noticeCarousel"]').prop('checked');

            if (NoticeTypeDetailID != "" && NoticeName != "" && NoticeContent != "") {
                //if (noticeCarousel == true && $('#fromNotice input[name="noticeCarouseImage"]').prop('files').length == 0)
                if (noticeCarousel == true && $("#NoticeCarousePicture").attr("src") == "") {
                    layer.alert("如要添加到轮播显示，请上传图片", { icon: 0, title: '提示' });
                    return;
                }
                var fd = new FormData();
                fd.append("NoticeID", noticeId);//公告id
                fd.append("NoticeTypeDetailID", NoticeTypeDetailID);//公告类型明细ID
                fd.append("NoticeName", NoticeName);//公告名称
                fd.append("NoticeContent", NoticeContent);//公告内容
                fd.append("Overhead", Overhead);//置顶显示
                fd.append("New", New);//New显示天数
                fd.append("noticeCarousel", noticeCarousel);//是否轮播
                fd.append("noticeCarouseImage", $('#fromNotice input[name="noticeCarouseImage"]').prop('files')[0]);//文件添加到FormData

                var xhr = new XMLHttpRequest();
                xhr.addEventListener("load", function (event) {
                    layer.confirm("确定是要修改这条数据了吗？", {
                        icon: 3,
                        btn: ['是的', '稍等，还需要再确认一下']
                    }, function (layerIndex) { 
                    if (event.currentTarget.responseText == "true") {
                        layer.msg("保存成功", { icon: 1, title: '提示' });
                        window.location.href = "/SystemManagement/IssuanceNotice/NoticeManagement"
                        //这个是加上的链接
                            layer.close(layerIndex);//关闭提示框
                           
                    }
                    else {
                        layer.alert("保存失败", { icon: 2, title: '提示' });
                    }
                    });
                    }, false);
                
                xhr.addEventListener("error", function (event) {
                    layer.alert("保存失败", { icon: 2, title: '提示' });
                }, false);
                xhr.open("POST", "/SystemManagement/IssuanceNotice/NoticeUpdate");
                xhr.send(fd);
            } else {
                alert("请填写完整");
            }
        });

完成修改回到查询页面，如下图所示：

设置链接之后按照目前的代码写法会立即跳转页面，如果这个时候想要有提示的效果的话就可以用到:setTimeout()；指定的延迟时间之后来执行代码。

setTimeout()；指定的延迟时间之后来执行代码

在原先的代码中去掉链接 window.location.href = “/SystemManagement/IssuanceNotice/NoticeManagement” 后，在原位置调用了sayHello()这个方法；在项目中加了指定的延迟时间之后来执行代码：

$("#saveForm").click(function () {
            var NoticeTypeDetailID = $('#fromNotice [name="NoticeTypeDetailID"]').val();
            var NoticeName = $('#fromNotice input[name="NoticeName"]').val();
            var NoticeContent = ckeditorNoticeContent.getData();
            var Overhead = $('#fromNotice input[name="Overhead"]').prop('checked');
            var New = $('#selectNew').val();
            var noticeCarousel = $('#fromNotice input[name="noticeCarousel"]').prop('checked');

            if (NoticeTypeDetailID != "" && NoticeName != "" && NoticeContent != "") {
                //if (noticeCarousel == true && $('#fromNotice input[name="noticeCarouseImage"]').prop('files').length == 0)
                if (noticeCarousel == true && $("#NoticeCarousePicture").attr("src") == "") {
                    layer.alert("如要添加到轮播显示，请上传图片", { icon: 0, title: '提示' });
                    return;
                }
                var fd = new FormData();
                fd.append("NoticeID", noticeId);//公告id
                fd.append("NoticeTypeDetailID", NoticeTypeDetailID);//公告类型明细ID
                fd.append("NoticeName", NoticeName);//公告名称
                fd.append("NoticeContent", NoticeContent);//公告内容
                fd.append("Overhead", Overhead);//置顶显示
                fd.append("New", New);//New显示天数
                fd.append("noticeCarousel", noticeCarousel);//是否轮播
                fd.append("noticeCarouseImage", $('#fromNotice input[name="noticeCarouseImage"]').prop('files')[0]);//文件添加到FormData

                var xhr = new XMLHttpRequest();
                xhr.addEventListener("load", function (event) {
                    layer.confirm("确定是要修改这条数据了吗？", {
                        icon: 3,
                        btn: ['是的', '稍等，还需要再确认一下']
                    }, function (layerIndex) { 
                    if (event.currentTarget.responseText == "true") {
                        layer.msg("保存成功", { icon: 1, title: '提示' });
                        sayHello();
                            layer.close(layerIndex);//关闭提示框
                           
                    }
                    else {
                        layer.alert("保存失败", { icon: 2, title: '提示' });
                    }
                    });
                    }, false);
                
                xhr.addEventListener("error", function (event) {
                    layer.alert("保存失败", { icon: 2, title: '提示' });
                }, false);
                xhr.open("POST", "/SystemManagement/IssuanceNotice/NoticeUpdate");
                xhr.send(fd);
            } else {
                alert("请填写完整");
            }
        });

function sayHello() {
            var timerTimeout = setTimeout(ABC, 2000);
        }
        function ABC() {
            window.location.href = "/SystemManagement/IssuanceNotice/NoticeManagement";
        }

运行效果如图：

指定延迟2秒后执行页面跳转。
这样就可以得到想要的效果了，谢谢。