首页手记 js函数自动执行（附：window.onload与$(...

js函数自动执行（附：window.onload与$(document).ready()、定时器的区别）

标签：

JavaScript

首先写一个函数

function myFunction(){
//函数内容
console.log("函数自动执行");
}

函数自动执行方法一：

window.onload=myFunction();
注：
`<1>window.onload://只有当页面中的HTML结构、图片、文字等所有资源都加载完成才会执行对应的操作 (在一个页面中只能使用一次,使用多次后面会把前面的覆盖掉->因为它是DOM0级事件绑定,如果改为DOM2事件绑定也是可以使用多次的) window.addEventListener("load",function(){},false);

<2>$(document).ready(): //只要页面中的HTML结构(DOM结构)将加载完成就会执行对应的操作(一个页面可以使用多次)，不必等到加载完毕
document.addEventListener("DOMContentLoaded",function(){},false);
$(document).ready(function(){})可以简写成$(function(){});`

函数自动执行方法二：
修改HTML的Body为：

<body onLoad="myFunction();">

或者改为：
<body onLoad="javascript:myFunction();">

函数自动执行方法三：
定时器
setTimeout("myFunction()",1000);

//1、两种定时的区别
    window.setTimeout([function],[interval]) ->设置一个等待时间[interval],当到达时间后执行我们的[function],执行完成当前定时器停止(执行一次)

    window.setInterval([function],[interval]) ->设置一个等待时间[interval],当到达时间后执行我们的[function],执行完成后,定时器并没有停止,而是以后每隔这么常时间都会执行一次[function](执行多次)

    2、定时器是有返回值的
    返回值是一个number类型的值,代表当前是第几个定时器
    即使上面的定时器清掉,我们的数字也是累加的,例如:设置一个定时器,然后在把定时器删除,然后在设置一个定时器,此时虽然第一个定时器没有了,但是第二个定时器的返回值还是2(这个和银行排队号是一样的)
        var timer = window.setTimeout(function () {}, 1000);
        console.log("timer:" + timer);//->1
        window.clearTimeout(timer);
        var timer2 = window.setTimeout(function () {}, 1000);
        console.log("timer2:" + timer2);//->2

    3、定时器是异步编程的

    同步:只有当前处理的事情结束了,才会去做下一件事情
    姐姐回家喜欢喝咖啡看书->先去煮咖啡,需要半个小时才能煮好,在煮的过程中,啥事都不干,一直干盯着等,只有咖啡煮好了,才去看书
    我们的for循环其实就是一个简单的同步:只有循环10次都结束了,才会执行循环外面的代码
        for (var i = 0; i < 10; i++) {
            if (i === 9) {
                console.log("循环结束~~");
            }
        }
        console.log("ok");

    异步:在当前的事情还处于等待时间的时候,我们先执行下面的事情,当下面的事情执行完成后在返回头看当前的事情是否到达时间,时间到了在执行
    哥哥回家喜欢喝咖啡看书->先去煮咖啡,需要半个小时才能煮好,在煮的过程中,不会干等着,继续执行下面的事情看书,只有等看书的事情结束后,才想起我们的咖啡已经煮了10个小时了

    先输出0在输出1
        var count = 0;
        window.setTimeout(function () {
            count++;
            console.log(count);//->2) 1
        }, 1000);
        console.log(count);//->1) 0

    我们给定时器设置一个时间,但是不一定是到时间就执行,只有等while循环结束后才会看定时器是否到时间,那时在执行
        var count = 0;
        window.setTimeout(function () {
            count++;
            console.log(count);
        }, 10);
      var i = 0;
        while (i < 1000000) {
            i++;
        }

    每个浏览器对于定时器都有一个默认的最小时间(谷歌5~6 IE10~13),即使你的时间写0也不是立即执行,在谷歌下需要等待5~6ms后才会执行
        var count = 0;
       window.setTimeout(function () {
            count++;
            console.log(count);//->2) 1
        }, 0);
        console.log(count);//->1) 0

    4、所有的事件绑定都是异步编程的
    我们发现当我们点击的时候,函数中的i已经变为最后一次循环完成的结果了
        for (var i = 0; i < oLis.length; i++) {
            oLis[i].onclick = function () {
                changeTab(i);
            }
        }

点击查看更多内容