老师,函数调用过程麻烦讲下,没搞明白

老师,函数调用过程麻烦讲下,没搞明白

  1. 这些函数都是怎么就调用了的,从哪里开始调用的,接着是什么流程

  2. fn();是怎么调用的函数,调用的哪个函数

  3. 有try case,下面的d.onreadystatechange是不是就用不到了


function myReady(fn){


    //对于现代浏览器,对DOMContentLoaded事件的处理采用标准的事件绑定方式

    if ( document.addEventListener ) {

        document.addEventListener("DOMContentLoaded", fn, false);

    } else {

        IEContentLoaded(fn);

    }


    //IE模拟DOMContentLoaded

    function IEContentLoaded (fn) {

        var d = window.document;

        var done = false;


        //只执行一次用户的回调函数init()

        var init = function () {

            if (!done) {

                done = true;

                fn();

            }

        };


        (function () {

            try {

                // DOM树未创建完之前调用doScroll会抛出错误

                d.documentElement.doScroll('left');

            } catch (e) {

                //延迟再试一次~

                setTimeout(arguments.callee, 50);

                return;

            }

            // 没有错误就表示DOM树创建完毕,然后立马执行用户回调

            init();

        })();


        //监听document的加载状态

        d.onreadystatechange = function() {

            // 如果用户是在domReady之后绑定的函数,就立马执行

            if (d.readyState == 'complete') {

                d.onreadystatechange = null;

                init();

            }

        }

    }

}


正在回答

登陆购买课程后可参与讨论,去登陆

5回答

同学你好,对于你的问题解答如下:

  1. 在html文件中引入domReady.js之后,就可以调用myReady方法,调用myReady方法时,就会执行该方法内部的代码。如下:

    http://img1.sycdn.imooc.com//climg/5e8474e60905b3ed11520350.jpg

  2. fn是myReady方法定义时设置的形参,对应的就是调用myReady方法传入的函数。示例:

    http://img1.sycdn.imooc.com//climg/5e8475c10977874a11940184.jpg

  3. 不是的。try...catch中代码主要是处理DOM树未创建完之前调用doScroll的情况,后面的d.onreadystatechange是监听document的加载状态。

    try{}catch{}语法的作用就是:当执行try语句中的代码出现错误时,代码不会在控制台出现报错信息停止往后执行,而是将错误抛到catch语句中,在catch语句中对错误进行处理,让代码正常运行下去。当执行try语句中的代码没有错误时,会跳过catch语句,继续之后面的代码。

    在前面的课程中有详细讲解try...catch的用法,同学可以回顾下,加深理解。https://class.imooc.com/lesson/772#mid=19393 

  4. 因为当我们监听到document已经加载完成后,就不需要再继续监听document的加载状态了,所以可以将d.onreadystatechange 赋值 为null;

    简单理解就是将d.onreadystatechange设置为初始状态,当然了,也可以不用赋值为null的。

  5. 如果直接调用fn函数,在try...catch这部分代码没有报错,会执行一次,继续往后执行代码,此时document已经在完成,在d.onreadystatechange中会再次执行一次,但实际加载完成之后,只需要执行一次就可以了,所以老师定义了一个init方法处理这种情况。

    http://img1.sycdn.imooc.com//climg/5e847aef09b9764714101076.jpg

    同学这种写法是可以的。

    http://img1.sycdn.imooc.com//climg/5e847b8c09c3dced06920868.jpg

  6. 直接写document也是可以的,写成window.document这种方式可能是老师书写代码的习惯。

同学可以结合上述解析,简单了解下,老师也能够感受到同学对于知识的渴望,但是因为有些知识都是高级阶段的,而且逻辑比较复杂,别说同学现在才刚入门还没有学过,即使是学完所有阶段,也不一定能听懂。所以老师是希望同学不要影响学习效率,能够把时间花在更重要的知识上。学习要循序渐进,如果同学真的想完全学懂,建议等学习第二个阶段的js进阶后,再来回顾会稍微好理解一点。

祝学习愉快~

好帮手慕慕子 2020-04-01 14:40:46

同学你好,第三章讲解的domReady.js涉及了很多高级阶段的知识,现在入门阶段还没有学到,所以老师即使给你讲解了,可能对于同学来说还是理解不了。domReady在实际开发中不用,所以了解一下就行。建议合理安排学习时间,继续学习后面的内容。另外,它是为了解决如下问题:

因为把js代码放在head中,代码顺序执行,当页面在浏览器中打开时,会先执行js代码,再执行body里面的dom结构。如果js执行时要获取body中的元素,那么就会报错,因为页面的结构还没有加载进来。所以老师为了解决这个问题,写了一个方法。 这个方法实现的效果就是$(document).ready(function(){}) , 让DOM加载完后再去执行js代码 。因为现在还没有学习到jQuery , 所以这里老师为了方便课程讲解自己封装了一个类似的方法,里面涉及到很多高级阶段才会学习到的内容,视频中老师只是简单的带大家了解一下封装的过程,目前,同学对 domReady.js简单了解一下即可,不需要深入研究,先用老师写好的就行,使用的时候直接引入即可。后期学了jQuery,使用$(document).ready(function(){}) 就可以啦 。

祝学习愉快~

  • 提问者 慕慕4335856 #1
    。。但是我想知道啊
    2020-04-01 15:13:10
  • 提问者 慕慕4335856 #2
    老师,讲一下吧,麻烦了 最后为什么还要d.onreadystatechange 赋值 null; IEContentLoaded();不设init函数,就会执行多次吗,怎么执行的
    2020-04-01 15:31:31
提问者 慕慕4335856 2020-04-01 11:03:53

6.为什么要d=window.document,d=document行吗

提问者 慕慕4335856 2020-04-01 10:53:38

5.IEContentLoaded();不设init函数,就会执行多次吗,为什么,怎么执行的

  • 提问者 慕慕4335856 #1
    还有,这种方式可以吗 var done=true; var init=function(){ if(done){ done=false; fn(); } }
    2020-04-01 10:56:30
提问者 慕慕4335856 2020-04-01 10:33:25

4.最后为什么还要d.onreadystatechange 赋值 null;

  • 提问者 慕慕4335856 #1
    第三个问题是try{}catch{}...
    2020-04-01 10:59:15
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师