js window.onload ,$(function(){}) 和script标签运行规则和错误引起下面的js不能运行探讨

最新推荐文章于 2022-12-25 19:48:00 发布

怵生

最新推荐文章于 2022-12-25 19:48:00 发布

阅读量673

点赞数

分类专栏： js 文章标签： javascript

本文链接：https://blog.csdn.net/u013308135/article/details/51964099

版权

js 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

今天在做一个功能然后和我师父一起探讨了一下对onload 和$(function(){})
和代码出错对全局js中断运行有了新的看法

首先说一下 (function() {})() ，$(function(){}) ，window.onload的区别

$(function () {
    console.log("ready执行");
});

$(function() {
    console.log("ready1执行");
});

window.onload = function () {
    console.log('load执行');
};
window.onload = function () {
    console.log('load1执行');
}

1. $(function(){})不会被覆盖，而window.onload会被覆盖，个人感觉$ (function(){})不会被覆盖的原因是将其放入到了一个队列中，在对应时机一次出队。
2. $(function(){})在window.onload执行前执行的，$ (function(){})类似于原生js中的DOMContentLoaded事件，在DOM加载完毕后，页面全部内容（如图片等）完全加载完毕前被执行。而window.onload会在页面资源全部加载完毕后才会执行。
3. (function() {})() 按顺序执行，不会覆盖。
4. 普通的标签是跟着DOM文档加载的顺序来和3一样，按顺序执行。
DOM文档加载步骤：
1.加载head的css和js
2.解析HTML结构
3.加载外部的脚本和样式文件
4.解析并执行脚本代码
5.执行$(function(){})内对应代码
6.加载图片等二进制资源
7.页面加载完毕，执行window.onload
注：如果有不同域名下的js 个人曾经做的测试是按顺序执行（不知道对不对）
列子

<html>
  <head>
    <script>
    $(function () {
      alert(2)
    })
    </script>    
  </head>
  <body>
    <script>alert(1)</script>    
  </body>
</html>

这个就非常好理解，下面举一个多个$(function({})的列子

<html>
  <head>
    <script>
    $(function () {
      alert(3)
    })
    $(function () {
      alert(4)
    })
    </script>    
  </head>
  <body>
    <script>alert(1)</script> 
    <script>
        window.onload=function(){
        alert("last")
        }
        alert(2)
    </script>   
  </body>
</html>

然后在来一个嵌套的$(function(){})

<html>
  <head>
    <script>
    $(function () {
        alert(3)
        $(function () {
          alert(5)
        })
    })
    </script>  
    <script>
    $(function () {
    alert(4)
        $(function () {
          alert(6)
        })
    })
    </script>  
  </head>
  <body>
    <script>alert(1)</script> 
    <script>
        window.onload=function(){
        alert("last")
        }
        alert(2)
    </script>   
  </body>
</html>

多个$(function(){}) 嵌套也是顺序执行

下面来看一下js出错引起下面代码不能使用的列子

    <script>alert(42s)</script> 
    <script>
        window.onload=function(){
        alert(123)
        }
        alert(asss)
        alert(13)
    </script>

这段代码在第一个标签报错了但是在第二个标签中的js还能执行
但是alert（13）却不能在执行了而且也不会影响$(function(){})中的代码停止运行

    <script>
    $(function () {
        alert(3)
        alert(asss)
        $(function () {
          alert(5)
        })
    })
    </script>  
    <script>
    $(function () {
    alert(4)
    alert(asss)
        $(function () {
          alert(6)
        })
    })
    </script>