location.href跳转的时机 - pod4g/tool GitHub Wiki

  • 测试时间：20160201
  • 测试环境MacBook
  • 测试浏览器：chrome/safari/firefox

当在页面上点击“前往慕课网”按钮时，并不会马上跳转到慕课网，而是先把循环执行完毕，再跳转。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试location.href跳转时机</title>
</head>
<body>
<input type="button" id="btn" value="前往慕课网"> 
<script type="text/javascript">
    document.addEventListener('DOMContentLoaded',function(){
        var btn = document.getElementById('btn');
        btn.onclick = function(){
            location.href = "http://imooc.com";
            for(var i = 0;i<10000;i++){
                console.log(i);
            }
        }
    },false)
</script> 
</body>
</html>

如果不是一个循环，而是一个定时器呢？答案是，当时间足够小时，会先执行定时器，当时间很大，那么就不会执行

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试location.href执行时机</title>
</head>
<body>
<input type="button" id="btn" value="前往慕课网"> 
<script type="text/javascript">
    document.addEventListener('DOMContentLoaded',function(){
        var btn = document.getElementById('btn');
        btn.onclick = function(){
            location.href = "http://imooc.com";
            // 当时间为0或100执行定时器再跳转，当时间为1000时，先跳转。
            setTimeout(function(){
                alert(2);
            },100)
        }
    },false)
</script> 
</body>
</html>
Add a custom footer
⚠️ **GitHub.com Fallback** ⚠️