实现计时跳转的代码：

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>无内容</title>

</head>

<body>

未找到结果, <span id="secound">3</span> 秒后跳转到首页

<script type="text/javascript">

    var sec = document.getElementById("secound")

    var interval = parseInt(sec.innerText);

    (function () {

        if (interval > 0) {

            setTimeout(arguments.callee, 1000);

            sec.innerText = interval;

            interval--;

        } else {

            window.location.href = "/";

        }

    })();

</script>

</body>

</html>

了解下  从setTimeout谈JavaScript运行机制（原文可能有出入，请仔细鉴别）

一段js代码（里面可能包含一些setTimeout、鼠标点击、ajax等事件），从上到下开始执行，遇到setTimeout、鼠标点击等事件，异步执行它们，此时并不会影响代码主体继续往下执行(当线程中没有执行任何同步代码的前提下才会执行异步代码)，一旦异步事件执行完，回调函数返回，将它们按次序加到执行队列中，这时要注意了，这表示异步事件执行，但回调不会立即返回，需要等主体函数完成。这也就是上面的一段代码导致浏览器假死的原因（主体代码中的while(true){}还没执行完）。

(function() {

    console.log(1);

    setTimeout(function(){console.log(2)}, 1000);

    setTimeout(function(){console.log(3)}, 0);

    console.log(4);

})();

所以在控制台输出

1

4

undefined // 整体函数返回值

3

2

扩展：script 标签的下载同步/异步与执行同步 参考

结论：js 在执行的时候，html 会阻塞渲染，js 执行完毕 html 可以继续渲染。这样的规定也与 js 单线程模型相契合，因为对于html来说 dom 是共享变量，如果 js是多线程或者 js执行与 dom渲染操作是并行的，则可能会发生资源抢占问题。

Javascript 异步处理与计时跳转的更多相关文章

  1. JavaScript异步编程原理

    众所周知,JavaScript 的执行环境是单线程的,所谓的单线程就是一次只能完成一个任务,其任务的调度方式就是排队,这就和火车站洗手间门口的等待一样,前面的那个人没有搞定,你就只能站在后面排队等着. ...

  2. 【转】JavaScript 异步进化史

    前言 JS 中最基础的异步调用方式是 callback,它将回调函数 callback 传给异步 API,由浏览器或 Node 在异步完成后,通知 JS 引擎调用 callback.对于简单的异步操作 ...

  3. Promises与Javascript异步编程

    Promises与Javascript异步编程 转载:http://www.zawaliang.com/2013/08/399.html 在如今都追求用户体验的时代,Ajax应用真的是无所不在.加上这 ...

  4. 通过javascript库JQuery实现页面跳转功能代码

    通过javascript库JQuery实现页面跳转功能代码的四段代码实例如下. 实例1: 1 2 3 4 $(function(){ var pn = $("#gotopagenum&quo ...

  5. 转: Promises与Javascript异步编程

    在如今都追求用户体验的时代,Ajax应用真的是无所不在.加上这些年浏览器技术.HTML5以及CSS3等的发展,越来越多的富Web应用出现:在给与我们良好体验的同时,Web开发人员在背后需要处理越来越多 ...

  6. 用Html5/CSS3做Winform，一步一步教你搭建CefSharp开发环境（附JavaScript异步调用C#例子，及全部源代码）上

    本文为鸡毛巾原创,原文地址:http://www.cnblogs.com/jimaojin/p/7077131.html,转载请注明 CefSharp说白了就是Chromium浏览器的嵌入式核心,我们 ...

  7. Javascript异步编程之setTimeout与setInterval详解分析(一)

    Javascript异步编程之setTimeout与setInterval 在谈到异步编程时,本人最主要会从以下三个方面来总结异步编程(注意:特别解释:是总结,本人也是菜鸟,所以总结不好的,请各位大牛 ...

  8. JavaScript 异步进化史

    前言 JS 中最基础的异步调用方式是 callback,它将回调函数 callback 传给异步 API,由浏览器或 Node 在异步完成后,通知 JS 引擎调用 callback.对于简单的异步操作 ...

  9. ajax异步加载回跳定位

    1)首先,问题是这样的:page1在一个滚动到页面底部加载更新的函数(功能),当页面滚动了第二页(或更多页)时,点击链接跳转到了其他页面(page2),在page2有返回按钮,当从page2返回pag ...

随机推荐

  1. 版本控制：tortoise svn的 revert to this revision和 revert changes from this revision有什么区别？

    问题: The link: http://tortoisesvn.net/docs/nightly/TortoiseSVN_en/tsvn-howto-rollback.html describes ...

  2. Hadoop+HBase 集群搭建

    Hadoop+HBase 集群搭建 1. 环境准备 说明:本次集群搭建使用系统版本Centos 7.5 ,软件版本 V3.1.1. 1.1 配置说明 本次集群搭建共三台机器,具体说明下: 主机名 IP ...

  3. Java高并发和多线程系列 - 1. 线程基本概念

    1. 什么是线程? 线程和进程的区别 在了解线程的概念前,我们应该先知道什么是进程? 进程是操作系统的基本概念之一, 它是正在执行的程序实例. * 下面的一些进程的基本概念你可以了解下 ------- ...

  4. 【ASP.NET Core】浅说目录浏览

    何谓“浅说”?就是一句话说不完,顶多两句话就介绍完毕,然后直接给上实例的解说方式.化繁为简,从七千年前到现在,从老祖宗到咱们,一直都在追求的理想目标,尽可能把复杂的东西变成简单的. 老周告诉你一个可以 ...

  5. 每天一个linux命令(10):cat

    1.命令简介 cat (concatenate,连接)命令将[文件]或标准输入组合输出到标准输出,如果没有指定文件,或者文件为"-",则从标准输入读取. 2.用法 cat [选项] ...

  6. CSS 水平居中与垂直居中

    前言 在CSS布局中,水平居中与垂直居中一直是用到比较多的,在本篇中将介绍水平居中.垂直居中的几种方式. 示例 HTML: <div class="parent"> & ...

  7. iOS性能优化篇 —— 耗电优化总结

         手机App耗电的主要来源有以下四个因素: CPU处理,Processing 网络,Networking 定位,Location 图像,Graphics 耗电优化最终目的:通过尽可能降低CPU ...

  8. PEP 492 -- Coroutines with async and await syntax 翻译

    因为工作中慢慢开始用python的协程,所以想更好的理解一下实现方式,故翻译此文 原文中把词汇表放到最后,但是我个人觉得放在最开始比较好,这样可以增加当你看原文时的理解程度 词汇表 原生协程函数 Na ...

  9. Atitit 酷奇的押金危机 遇到资金链断裂作为创始人应该怎么办

    Atitit 酷奇的押金危机  遇到资金链断裂作为创始人应该怎么办 遇到对方确实经营不善,资产已经还不了用户的押金怎么办?? 1. 一些重要原则 1 1.1. 二次分配原则  公平原则 1 1.2. ...

  10. 物联网架构成长之路(25)-Docker构建项目用到的镜像1

    0. 前言 现在项目处于初级阶段,按照规划,先构建几个以后可能会用到的Image,并上传到阿里云的Docker仓库.以后博客中用到的Image,大部分都会用到这几个基础的Image,构建一个简单的物联 ...