ITPub博客

首页 > IT职业 > IT图书 > js函数自动执行(附:window.onload与$(document

js函数自动执行(附:window.onload与$(document

IT图书 作者:cnaka 时间:2021-09-09 08:57:03 0 删除 编辑

首先写一个函数

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

函数自动执行方法一:

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

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


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

或者改为:


函数自动执行方法三:
定时器
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个小时了

    先输出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 2) 1
        }, 0);
        console.log(count);//->1) 0

    4、所有的事件绑定都是异步编程的
    我们发现当我们点击的时候,函数中的i已经变为最后一次循环完成的结果了
        for (var i = 0; i 

来自 “ ITPUB博客 ” ,链接:https://blog.itpub.net/3368/viewspace-2798054/ ,如需转载,请注明出处,否则将追究法律责任。

请登录后发表评论 登录
全部评论

注册时间:2019-08-14

  • 博文量
    79
  • 访问量
    754