javascript的onload回调问题

Posted 2023-02-27

正在学习javascript，看到一段代码
var img=new Image();
img.onload=function()
ctx.drawImage(img,100,100);
img.src='images/sprites.png';
书上有一段解释“在试图把图像绘制到上下文中之前，代码会先等待onload回调，然后在设置回调之后设置src。这一顺序非常重要，因为若掉转了这两行代码的顺序，图像就会被缓存”
1、没明白为什么要这么做？既然用了 new Image（）不就是为了缓存图像的吗？
2、src放在后面了，为什么执行drawImage（）的时候没有报错，而图像能正常显示出来？
3、img.onload回调到底是什么意思？和一些JS书中提到的回调函数是什么关系？
请高手不吝赐教！

1、 new Image()只是建立一个Image对象，在给src属性赋值之前，图像并没有加载到内存，所以是不会缓存图像的。
2、drawImage()是放在img的onload事件中执行的，也就是说它不是立即执行的，而是等待img的onload事件发生后（也就是img中的图像被加载到内存后）才执行的。这就好比埋地雷，埋完地雷后地雷是不会立刻爆炸的，埋地雷的人可以紧接着去做其他事（比如去其他地方继续埋雷），只有达到触发条件（比如敌人踩上去了）地雷才会爆炸。表面上埋地雷的动作是发生在前面的，但实际的运行结果（爆炸）却是发生在后面的。程序里也一样，表面上drawImage()是放在给src赋值之前，但它实际上是在src赋值之后才运行的。
3、img.onload严格来讲并不叫回调，而是一个事件过程，就是说当这个事件（onload）发生了，它里面的代码才会执行，而如果事件没发生，那么代码是不会主动运行的。事件过程是面向对象编程的一个主要的逻辑结构，比如说鼠标点击（onclick）就是一个很常用的事件，点了鼠标就执行某个操作，而不点鼠标的时候，代码即使放在那里它也不敢擅自运行的。 参考技术A XMLHttpRequest 对象的 onload 回调函数是在异步请求加载完成后所执行的函数，JavaScript 监测到请求的数据全部传输完成后就会触发该函数。而 open() 函数设置异步请求的 method、URL 和同步方式等参数，执行 open() 后再执行 send() 函数才开始向服务器发送请求。另外，onload 回调函数实际上是 XHR2 中新加入的功能，部分浏览器可能不支持这个函数名。要避免不兼容的现象，可以使用传统XMLHttpRequest，如：
//省略其他代码
request.onreadystatechange=function() // 状态改变回调函数

  // 判断 request.readyState==4 的效果等同于 onload 
  if(request.readyState==4 && request.status==200)
  
    // 加载且响应正常完成后执行的代码.... 
  

request.open("GET",url,true); // 打开对象，也可以说是设置参数
request.send(); // 发送请求
还有一些误解需要澄清一下，window.onload 回调函数其实是在页面加载完成后（包括图片内容的显示）才会执行，并不是页面加载的等待过程中就执行。request.open() 并没有发送请求，只是设置一些参数，在 send() 时才会发送（注意不要漏写这条语句），发送后就会进入 readyState 监听状态，当 readyState 的值有改变就会执行 onreadystatechange 回调函数，当异请求的步数据接收完成（即 readyState 变为 4）后就会执行 onload 回调函数（注意仅在 XHR2 中有效）。希望可以帮到你！ 参考技术B XMLHttpRequest 对象的 onload 回调函数是在异步请求加载完成后所执行的函数，JavaScript 监测到请求的数据全部传输完成后就会触发该函数。而 open() 函数设置异步请求的 method、URL 和同步方式等参数，执行 open() 后再执行 send() 函数才开始向服务器发送请求。另外，onload 回调函数实际上是 XHR2 中新加入的功能，部分浏览器可能不支持这个函数名。要避免不兼容的现象，可以使用传统XMLHttpRequest 参考技术C 下次vvvv 参考技术D XMLHttpRequest 对象的 onload 回调函数是在异步请求加载完成后所执行的函数，JavaScript 监测到请求的数据全部传输完成后就会触发该函数。而 open() 函数设置异步请求的 method、URL 和同步方式等参数，执行 open() 后再执行 send() 函数才开始向服务器发送请求。另外，onload 回调函数实际上是 XHR2 中新加入的功能，部分浏览器可能不支持这个函数名。要避免不兼容的现象，可以使用传统XMLHttpRequest，如：

//省略其他代码

request.onreadystatechange=function() // 状态改变回调函数