HTML中有关for循环和onclick 的运行机制



html
    for (var i = 0; i < Rtriangles.length; i++) {
        Rtriangles[i].onclick = function () {
        ....
        }
    }
    console.log(111);

img

疑问：为什么for循环都运行完了，再次点击 onclick函数依然会运行，不应该代码从上至下运行完就结束了吗?

事件就是一个声明和调用的过程。

onclick是给那你那个Rtriangles添加声明，代码是运行完了，你就是用代码上的事件，然后事件就等待你点击触发，所以你肯定点击会运行啊。

再换个说法，onclick是添加点击事件，click才是点击事件，你用onclick定义的是click时会运行的函数。

虽然浏览器是单线程执⾏JavaScript代码的，但是浏览器实际是以多个线程协助操作来实现单线程异步模型

  1. GUI渲染线程
  2. JavaScript引擎线程
  3. 事件触发线程
  4. 定时器触发线程
  5. http请求线程
  6. 其他线程

主线程就是我们JavaScript执⾏代码的线程，主线程代码在运⾏时，会按照同步和异步代码将其分成两个去处，如果是同步代码执⾏，就会直接将该任务放在⼀个叫做“函数执⾏栈”的空间进⾏执⾏，执⾏栈是典型的【栈结构】（先进后出），程序在运⾏的时候会将同步代码按顺序⼊栈，将异步代码放到【⼯作线程】中暂时挂起，【⼯作线程】中保存的是定时任务函数、JS的交互事件、JS的⽹络请求等耗时操作。当【主线程】将代码块筛选完毕后，进⼊执⾏栈的函数会按照从外到内的顺序依次运⾏，运⾏中涉及到的对象数据是在堆内存中进⾏保存和管理的。当执⾏栈内的任务全部执⾏完毕后，执⾏栈就会清空。执⾏栈清空后，“事件循环”就会⼯作，“事件循环”会检测【任务队列】中是否有要执⾏的任务，那么这个任务队列的任务来源就是⼯作线程，程序运⾏期间，⼯作线程会把到期的定时任务、返回数据的http任务等【异步任务】按照先后顺序插⼊到【任务队列】中，等执⾏栈清空后，事件循环会访问任务队列，将任务队列中存在的任务，按顺序（先进先出）放在执⾏栈中继续执⾏，直到任务队列清空。
for循环结束后，点击事件已经进入任务队列等待触发执行

你 onclick = function 现在只是说绑定了这个事件

和函数调用是一个原理 ，函数 可以声明，但是不调用 不执行