284 线程机制与事件机制：事件处理机制

2020-02-03 15:56:15 阅读：239 来源： 互联网

标签：function 事件处理 console log 初始化代码线程机制回调

五、事件处理机制(图)

代码分类
- 初始化执行代码: 包含绑定dom事件监听, 设置定时器, 发送ajax请求的代码
- 回调执行代码: 处理回调逻辑
js引擎执行代码的基本流程:
- 初始化代码 ===> 回调代码
模型的2个重要组成部分:
- 事件管理模块
- 回调队列
模型的运转流程
- 执行初始化代码, 将事件回调函数交给对应模块管理
- 当事件发生时, 管理模块会将回调函数及其数据添加到回调列队中
- 只有当初始化代码执行完后(可能要一定时间), 才会遍历读取回调队列中的回调函数执行
- heap：堆

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>04_JS是单线程的</title>
</head>

<body>
    <!--
1. 如何证明js执行是单线程的?
  * setTimeout()的回调函数是在主线程执行的
  * 定时器回调函数只有在运行栈中的代码全部执行完后才有可能执行

2. 为什么js要用单线程模式, 而不用多线程模式?
  * JavaScript的单线程，与它的用途有关。
  * 作为浏览器脚本语言，JavaScript的主要用途是与用户互动，以及操作DOM。
  * 这决定了它只能是单线程，否则会带来很复杂的同步问题

3. 代码的分类:
  * 初始化代码
  * 回调代码
  
4. js引擎执行代码的基本流程
  * 先执行初始化代码: 包含一些特别的代码   回调函数(异步执行)
    * 设置定时器
    * 绑定事件监听
    * 发送ajax请求
  * 后面在某个时刻才会执行回调代码
-->
    <script type="text/javascript">
        setTimeout(function() {
            console.log('timeout 2222')
            alert('22222222')
        }, 2000)

        setTimeout(function() {
            console.log('timeout 1111')
            alert('1111111')
        }, 1000)
        
        setTimeout(function() {
            console.log('timeout() 00000')
        }, 0)

        function fn() {
            console.log('fn()')
        }
        fn()

        console.log('alert()之前')
        alert('------') //暂停当前主线程的执行, 同时暂停计时, 点击确定后, 恢复程序执行和计时
        console.log('alert()之后')
    </script>
</body>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>05_事件循环模型</title>
</head>

<body>
    <button id="btn">测试</button>
    <!--
1. 所有代码分类
  * 初始化执行代码(同步代码): 包含绑定dom事件监听, 设置定时器, 发送ajax请求的代码
  * 回调执行代码(异步代码): 处理回调逻辑
2. js引擎执行代码的基本流程:
  * 初始化代码 ===> 回调代码
3. 模型的2个重要组成部分:
  * 事件(定时器/DOM事件/Ajax)管理模块
  * 回调队列
4. 模型的运转流程
  * 执行初始化代码, 将事件回调函数交给对应模块管理
  * 当事件发生时, 管理模块会将回调函数及其数据添加到回调列队中
  * 只有当初始化代码执行完后(可能要一定时间), 才会遍历读取回调队列中的回调函数执行
-->
    <script type="text/javascript">
        function fn1() {
            console.log('fn1()')
        }
        fn1()

        document.getElementById('btn').onclick = function() {
            console.log('点击了btn')
        }

        setTimeout(function() {
            console.log('定时器执行了')
        }, 2000)

        function fn2() {
            console.log('fn2()')
        }
        fn2()
    </script>
</body>

</html>

标签：function,事件处理,console,log,初始化,代码,线程,机制,回调
来源： https://www.cnblogs.com/jianjie/p/12255958.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

284 线程机制与事件机制：事件处理机制

五、事件处理机制(图)