5秒之后跳转

很多页面在显示错误页面时候都会有一个5秒之后跳转到XXX页面（如下图）

5秒之后跳转.gif

实现起来其实很简单，只需要两个步骤：

• 设置定时器
• 清楚定时器

(一)html结构部分：

 <div class="notfound_tips">
        <em id="time_out">5</em>秒后 页面跳转至 &nbsp;
        <a class="trig" href="javascript:">简书首页>></a>
    </div>

（二）逻辑部分(分为js和jQuery写法)：

①javascript写法:

// 5秒之后跳转,js
        var t = 5;
        setInterval(function () {
            if (t < 1) {
             // 这里写的是5秒结束之后，执行的逻辑，此处是5秒之后跳转到简书首页
                window.location.href = 'https://www.jianshu.com/';
        // 清除定时器
                timer && window.clearInterval(timer);
            } else {
                document.getElementById('time_out').innerHTML = t;
                t = t - 1;
            }

        }, 1000)

②jQuery写法

// 5秒之后跳转,jQuery
       var t = 5;
        var timer = null;
        function time_out() {
            timer = setInterval(function () {
                if (t < 1) {
                    window.location.href = 'https://www.jianshu.com/';
             // 清除定时器
                timer && window.clearInterval(timer);
                } else {
                    $('#time_out').html(t);
                  //或：转为DOM对象$('#time_out')[0].innerHTML=t;
                    t = t - 1;
                }
            }, 1000);
        }
        time_out();

不管是哪一种写法，最后达到的功能都是一样的。不过在写jQuery的时候要注意以下几点：
将JavaScript写法改成jquery要注意：

• $('#time_out')获取的是一个jQuery对象，而innerHTML是一个DOM属性,所以$('#time_out').innerHTML（错误写法）的写法是无效的。
• 如果要用innerHTML,可以将jQuery对象转换成DOM对象：加数组下标。如：$('#time_out)[0].innerHTML=t。
• jQuery对象有特定的方法，无需转为DOM,例如：$（'#time_out'）.html(t)。
• 和innerHTML类似的还有innerText,使用方法同上。
• 一定要清除定时器，不然倒计时会出现负数。

(三) 补充需求

1、补充需求：

5秒跳转页面之后，点击浏览器按钮返回上一级，倒计时页面要刷新，即倒计时从5秒开始。

2、解决方案：
可以在js代码中（放在清除定时器后边）增加以下移动端点击返回上一级，页面强制刷新的代码：
页面强制刷新可以参考移动端点击返回键，页面不刷新解决方案

 window.addEventListener('pageshow', function (event) {
                    //event.persisted属性为true时，表示当前文档是从往返缓存中获取
                    if (event.persisted) location.reload();

整理旧笔记，供学习参考。