callback 和 js加载的位置问题

浏览数：24 / 时间：2015年06月09日

callback 是一个函数的调用过程就是有一个函数a 它有一个参数b 当a执行完毕后自动的去调用b (这是上午的学习心得有错误的地方请帮忙指出)

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8" />
       <title>callback test</title>
       <script type="text/javascript">
           function a(callback) {
               alert("我是第一个执行的函数我会自动调用下一个函数");
               callback();
           }
           function b() {
               alert("我被调用了");
           }
           a(b);
       </script>
   </head>
   <body>

   </body>
</html>

上面的是一个简单的例子当然你也可以在a中去调用b a() {b();}; 这样缺少了灵活性

下面是关于js加载位置的问题

我开始都是把js放在<head></head>中看书中有放在</body>之前不明白到底是怎么回事几天看了一篇博文给大家分享下

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8" />
       <title>callback test</title>
       <script src="a.js" type="text/javascript"></script>
       <script src="b.js" type="text/javascript"></script>
   </head>
   <body>

   </body>
</html>

你是这样的加载js的话当浏览器遇到script标签的时候会等到<script>执行完毕才进行页面的下载和渲染也就是可能看见页面被锁死了还有可能出现在js中你操作了一个还未加载的元素(图片)出现错误 (当然你可以通过window.onload 弥补这个我在下面会说)

这是另一种思路

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8" />
       <title>callback test</title>

   </head>
   <body>
       <script src="a.js" type="text/javascript"></script>
       <script src="b.js" type="text/javascript"></script>
   </body>
</html>

它是在页面的加载完成后去下载和执行js 但是这样会有2次GET请求好的方法是减少GET请求这又有两种方案

(1)你可以将a.js b.js 合并但是这样不好当加载的js过多时合并的过于复杂同时也每个js都有相应的功能合并对复用的体现不好

(2)其实上面的每种js的加载方式都是阻塞加载最好是在window.onload 事件触发后追加js 这又有两种情况

　　2.1 当你加载的js 是无先后执行顺序的

　　　　你可以通过这样 window.onload = function() {

　　　　　　$("#head").append("<script src="a.js" type="text/javascript"></script>");

　　　　　　$("#head").append("<script src="b.js" type="text/javascript"></script>");

　　　　}

　　2.2 当你的js是有先后的执行顺序的时候就要用到我们开始讨论的回调函数了就是在a.js 加载执行完毕去调用b.js 的加载和执行

　　　　<script type="text/javascript">
           function loadScript(url,callback) {
               var scirpts = document.createElement("<script>");
               script.type = "text/javascirpt";

               if(scripts.readyState) {//IE
                   scripts.onreadystatechange = function() {
                       if(scripts.readyState === "loaded" || scripts.readyState === "complete") {
                           scripts.onreadystatechange = null;
                           callback();
                       }
                   }
               } else {//非IE
                   scripts.onload = function() {
                       callback();
                   }
               }
               scripts.src = url;
               document.getElementById("head").appendChild(scripts);
           }
           loadScript("a.js",function() {
               loadScript("b.js",function() {

               });
           })
       </script>