-
2021-06-08 19:15:23
首先写一个函数
function myFunction(){
//函数内容
console.log("函数自动执行");
}
函数自动执行方法一:
window.οnlοad=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为:
或者改为:
函数自动执行方法三:
定时器
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);
}
}
更多相关内容 -
javascript模拟实现多次使用window.onload事件处理函数
2017-07-06 16:32:51javascript模拟实现多次使用window.onload事件处理函数: 大家知道当文档内容完全加载完毕的时候就会触发window.onload事件,进而执行事件处理函数。 不过利用window.onload注册事件处理函数的时候只能进行一次,...javascript模拟实现多次使用window.onload事件处理函数:
大家知道当文档内容完全加载完毕的时候就会触发window.onload事件,进而执行事件处理函数。
不过利用window.onload注册事件处理函数的时候只能进行一次,因为后面的会将前面的覆盖,代码如下:
[JavaScript] 纯文本查看 复制代码 运行代码12window.onload=func;
window.onload=anotherFunc;
在上面的代码中,如果事件触发,只会第二个事件处理函数anotherFunc。
下面就模拟一下如何实现注册多个事件处理函数的功能,代码如下:
[JavaScript] 纯文本查看 复制代码 运行代码01020304050607080910111213141516function
onloadCallback(){
//code
}
if
(window.onload){
var
onload_random=
'onload'
+Math.random();
window[onload_random]=window.onload;
window.onload=
function
(){
window[onload_random]();
onloadCallback();
};
}
else
{
window.onload=
function
(){
onloadCallback();
};
}
上面的代码模拟实现了多次注册window.onload事件处理函数的效果,下面介绍一下它的实现过程。
代码注释:
1.function onloadCallback(){ //code
},此函数是后来要注册的事件处理函数。
2.if(window.onload),判断是否已经注册window.onload事件处理函数。
3.var onload_random='onload'+Math.random(),声明一个变量并赋值,后面之所以加个随机数就是为了防止重复。4.window[onload_random]=window.onload,将原来的事件处理函数赋值给window对象的指定属性。
5.window.οnlοad=function(){
window[onload_random]();
onloadCallback();
},再重复注册事件处理函数,以前注册的就被覆盖了,不过这个不用担心,因为以前的事件处理函数已经被存储起来了,然后都放在当前的事件处理函数中就OK了。
6.else{
window.οnlοad=function(){
onloadCallback();
};
}如果原来没有注册,那么一切按照老思路。 -
解决html中window对象onload方法中调用alert方法,页面内容未渲染完成即弹出对话框问题
2019-12-02 15:48:45项目jsp页面中查询操作后台处理完毕后返回处理结果提示信息,然后前台页面 ...javascript引擎是单线程的,为了避免dom操作,http请求等耗时较长阻塞线程,js提供事件循环功能,将一些异步操作或有io阻塞的...项目jsp页面中查询操作后台处理完毕后返回处理结果提示信息,然后前台页面
alert弹框显示结果信息,但是发现页面重新绘制与弹出框顺序不确定,有时候会出现点击弹框“确定”按钮后jsp页面才进行重绘。希望能在页面重绘完成后再弹出提示信息。
网上查找资料后发现:
javascript引擎是单线程的,为了避免dom操作,http请求等耗时较长阻塞线程,js提供事件循环功能,将一些异步操作或有io阻塞的操作都
放入一个事件队列,先顺序执行同步代码,然后按顺序执行事件队列中的异步事件:
这些事件包括:
setTimeout() 设置异步延迟,DOM操作,网络io如ajax请求事件用户操作事件,比如鼠标点击等
由于以上机制,导致alert函数会先于页面渲染事件执行。解决方法是将alert替换成其他弹层插件,或者将alert 函数放到setTimeout()函数中,让其和dom操作事件一样放入事件队列中执行:setTimeout(“alert(‘ok’)”,0)但是按照以上方法依然无效,接着查找资料发现,浏览器页面渲染重绘操作不在js
引擎执行线程中,所以页面重绘与alert函数执行顺序不确定,因此只能将alert放入setTimeout中,并设置延迟以达到页面重绘先执行alert后执行的效果。
添加延迟时间100ms后问题解决。 -
关于canvas动画用window.onload事件初始化动画,加载外部字体失败问题的解决方案
2021-12-30 20:51:41} // 移动文字 function move() { // 每次调用时都重新赋值一个index // 循环调用此方法即可得到一个移动的动画效果 index = index + step; // 每次移动step长度的位置 // 当到达初始位置或者右上角的边界时,掉头 ...这两天帮别人利用canvas做一个简单的文字动画,碰到了一些问题。将自己踩坑和解决的思路记录如下。
关于使用 “canvas + 外部字体” 绘制文字动画,窗体加载时,初绘制的字体是默认字体的问题说明:
这个问题的发生主要是html外部字体的加载机制造成的。如果html文档中没有使用该字体的文字,则外部字体文件不会被加载出来,只有到被使用的时候才会被加载。
1、最简单的解决思路就是在html中加入文字,并设置为该字体。
2、另一个思路就是,既然你没有被加载,那我就在绘制之前先去把你加载出来。这里采用了元素做一个字体的预加载。但这里有个问题,预加载的时候会涉及到“作为本地file”运行和“在IDE开发环境与服务器环境中以"http/https"请求的模式运行”。<link rel="preload" href="./a.ttf" as="font" type="font/ttf">
第二种情况下需要在预加载参数中设置"crossorigin = anonymous"。
<link rel="preload" href="./a.ttf" as="font" type="font/ttf" crossOrigin = "anonymous"">
但如果直接在html文件的元素中写,那么在本地和在服务器的情况就无法兼顾。 这里我想到的是用js去添加这个元素,根据请求的protocol类型(window.location.protocol属性)来判断。但问题是当整个文件加载完成,也就是window.onload()方法已经执行完必,draw方法已经被调用,这样做是无意义的。
因此,我们需要研究一下浏览器解析html文件的过程,找到一个js里可以操作,并且生命周期在window.onload()之前的方法。经过查阅可知,document.onreadystatechange()事件监听器+document.readystate可满足上述需求。且当document.readystate = “interactive” 时,既可以对Dom对象操作,其生命周期也在window.onload()之前。故在js中添加如下代码。window.document.onreadystatechange = function () { console.log("recent ready state: " + document.readyState + " " + this.readyState) if(window.document.readyState === "interactive"){ let link = document.createElement("link"); link.rel = "preload"; link.href = "./a.ttf"; link.as = "font"; link.type = "font/ttf"; if(window.location.protocol.split(':')[0] === "http" || window.location.protocol.split(':')[0] === "https"){ link.crossOrigin = "anonymous"; } document.getElementsByTagName("head")[0].insertAdjacentElement("afterbegin", link); } }
接下来附上完整的代码:
<!DOCTYPE html> <html lang="en"> <head> <!--<link rel="preload" href="./a.ttf" as="font" type="font/ttf"> 预加载字体文件,防止出现绘制字体不对的情况 --> <meta charset="UTF-8"> <title>文字动画</title> <style> @font-face { font-family: "myFont"; src: url('./a.ttf'); } canvas { margin: 80px auto 0; border: 2px solid black; display: block; font-size: 0; } div{ margin: auto; width: 500px; } </style> </head> <body> <canvas id="cvs" width="600" height="400"></canvas> <script> // 获取HTML元素 const cvs = document.getElementById('cvs'); //绑定至页面中的canvas对象 const ctx = cvs.getContext('2d'); //获取一个2D动画对象 let animation_id = null; //定义一个动画id // 监听鼠标划过事件 cvs.addEventListener("mouseover", function () { play_the_animation(); },false); // 监听鼠标划出事件 cvs.addEventListener("mouseout", function () { stop_the_animation(); },false); // 监听鼠标单击事件 cvs.addEventListener("click", function () { if(animation_id != null){ stop_the_animation(); }else{ play_the_animation(); } },false); // 播放动画 function play_the_animation() { if(animation_id != null){ window.clearInterval(animation_id); } /**这个可以改,调节文字移动的速度,值越大,移动的越慢*/ // 设置动画效果,每隔10ms会调用一次move方法 animation_id = setInterval("move()",100); } // 暂停动画 function stop_the_animation() { window.clearInterval(animation_id); animation_id = null } // 定义绘制动画图形所需的变量 // 定义文字的颜色变化域,可以在下列数组中添加相应的颜色 const colors = ['red','orange','green','blue','purple','pink','black'] ; // 定义一个时间间隔变量,标识移动多少step后变换颜色 let color_change_interval = 30; /**这个可以改,调节颜色变化的速度,值越大,速度越慢*/ let color_change_counter = 0; // 定义一个计数器变量,标识当前移动了多少步 // step: 文字动画移动的步长 let step = 2; /**这个可以改,调节文字移动的速度,值越大,移动的越快*/ // index: 标识作为当前文字的位置 let index = 0 /**这里可以改成自己想要显示的文本*/ // 定义要显示的文本text变量 const text = 'NZUWI'; /** * 这里做个readystate监听 * 在html页面未加载完成前 * 判断是本地运行还是在IDE开发环境或者服务器环境中 * 区别在于本地请求的url是file类型的 * IDE开发环境中或者服务器环境中,请求的是http或者https * 对于http请求,在link预加载字体时, * 写入crossOrigin = "anonymous" 以支持可能的跨域请求 * 切记IDE中运行的时候不要一直刷新,有可能会出现字体没加载出来的情况 * 第一次运行的时候基本都是正确的 */ window.document.onreadystatechange = function () { console.log("recent ready state: " + document.readyState + " " + this.readyState) if(window.document.readyState === "interactive"){ let link = document.createElement("link"); link.rel = "preload"; link.href = "./a.ttf"; link.as = "font"; link.type = "font/ttf"; if(window.location.protocol.split(':')[0] === "http" || window.location.protocol.split(':')[0] === "https"){ link.crossOrigin = "anonymous"; } document.getElementsByTagName("head")[0].insertAdjacentElement("afterbegin", link); } } // 设置事件监听器 // 窗体加载时,先在初始位置绘制文字 window.onload = function(){ draw(index); }; // 绘制带有随机颜色的文字 function draw(index) { // 清除画布上已有内容,方便重新绘制 ctx.clearRect(0, 0, cvs.width, cvs.height); // 改变字体大小 根据index及下述公式计算 /** * 这里的0.1也可以改动,但不能太大,这是字体大小变化的速率,值越大,变化的越快 * 这里的15是文字初始情况下的大小,可以更改 */ let fontSize = 15 + index * 0.1; // 当移动了相应步长时,产生新的随机颜色 if(color_change_counter % color_change_interval === 0){ ctx.fillStyle = colors[Math.floor((Math.random()*colors.length))]; } color_change_counter++; //计数器++ // 设置字体 /**这个500是字体的粗细,也可以改*/ ctx.font = `500 ${fontSize}pt myFont`; // 设置水平对齐、垂直对齐 ctx.textAlign = 'left'; //水平方向: 左对齐 ctx.textBaseline = 'ideographic'; //垂直方向: //调用strokeText(text, x, y)方法 // x是水平位置,y是垂直位置 let x = index; let y = cvs.height - index; ctx.fillText(text, x, y); } // 移动文字 function move() { // 每次调用时都重新赋值一个index // 循环调用此方法即可得到一个移动的动画效果 index = index + step; // 每次移动step长度的位置 // 当到达初始位置或者右上角的边界时,掉头 if((index <= 0 && step < 0) || is_collision_with_right()){ step = step * (-1); // step * -1即可实现运动方向反向的效果 } // 调用draw方法在index位置重新绘制文字 draw(index); } /** * 做个边界碰撞检测 * 当向右上角运动并且碰到了canvas的边界时,掉头 * ( cvs.width - index < dimension.actualBoundingBoxRight 当前位置index距离右边界的距离小于bound * || cvs.height - index < dimension.actualBoundingBoxAscent ) 或者当前位置index距离上边界的距离小于bound * step > 0 并且当前正在向右上角移动时,即step为正数时 * 先或 (||), 再与 (&&) */ function is_collision_with_right() { let dimension = ctx.measureText(text); // 测量文字在画布中占据的像素 if ( (cvs.width - index < dimension.actualBoundingBoxRight || cvs.height - index < dimension.actualBoundingBoxAscent) && step > 0 ){ // 会发生碰撞,返回True return true; } else{ // 否则不会发生碰撞,返回False return false; } } </script> </body> </html>
-
js函数自动执行(附:window.onload与$(document).ready()、定时器的区别)
2021-06-13 11:13:28}函数自动执行方法一:window.onload=myFunction();注:`<1>window.onload://只有当页面中的HTML结构、图片、文字等所有资源都加载完成才会执行对应的操作 (在一个页面中只能使用一次,使用多次后面会把前面的... -
Js篇-面试题14-JavaScript 中的 window.onload 事件和 jQuery 的 ready 函数有何区别
2020-09-23 07:30:00在DOM完全就绪时就可以被调用,此时,网页的所有元素对JQuery而言都是可以访问的,但是这并不意味着这些元素关联的文件都已经下载完毕 编写个数: window.onload不能同时编写多个,而$(document).ready()能同时编写多个 ... -
JS window对象详解
2021-03-13 02:47:34window 是客户端浏览器对象模型的基类,window 对象是客户端 JavaScript 的全局对象。一个 window 对象实际上就是一个独立的窗口,对于框架页面来说,浏览器窗口每个框架都包含一个 window 对象。全局作用域在客户端... -
html如何用JS循环div,js循环改变div颜色具体方法
2021-06-23 05:09:19在使用javascript过程中,想循环遍历一个数组,经常使用的语法有两种:for (var i; i < array.length; i++) {statement;}for (var i in array) {statement;}这两种用法看起来能做同样的事情,但实际上两个循环的... -
js的for循环中return可以跳出循环,而使用forEach等不可以跳出循环
2020-08-20 16:56:30在vue项目中做表格增加行的时候,校验行内单元格某些字段的必填项,刚开始使用forEach进行循环遍历数组对象,然后判断对象的键值是否为空,为空则跳出循环,提示需要填写必填项,否则提示进行增加行。 forEach形式... -
for循环读取i值
2019-03-02 16:06:30window.onload = function(){ var oLis = document.getElementById("test").getElementsByTagName("li"); for(var i = 0;i ;i ++){ oLis[i].onclick = function(){ alert(i); //每次都是4 } } } ... -
setTimeout 自调用
2017-02-03 13:15:35var a=0; function abc(){ console.log(); a+=1;...window.onload=function(){ abc(); } 这是对于setTimeout()函数的一个有意思的方法。 通过函数内部自调用来达到类似间歇定时器的效果; -
JavaScript中需要注意for循环中的i
2022-03-25 22:33:05当响应函数执行时,for循环早已执行完毕 因此,响应函数里面输出的i全部都等于allA[i].length,而不是超链接对应的i 例子如下: <!DOCTYPE html> <html lang="en"> <head> <meta ... -
JS闭包循环引用导致内存泄漏之解决方法
2015-09-18 11:13:07方法一、主动设置JS对象element为空,打破循环引用 function assignHandler() { var element=document.getElementById("div1"); var id=element.id; element.onclick=function() //element的onclick引用... -
js循环请求接口
2019-03-07 17:37:20window.onload=function(){ setInterval(publicBusi,1000*60*1);//这里的1000表示1秒有1000毫秒,1分钟有60秒,7表示总共1分钟 } var number= $("#value").html(); function publicBusi(){ var url="... -
前端应用_js_利用for循环批量更改背景色
2019-08-03 19:19:58window.onload=function(){ var vat=document.getElementsByTagName("li"); #获取全部的li标签 for (var a=0;a;a++){ # for循环 vat[a].style.backgroundColor="red"; # 更改背景色 } } <li>1 <li>2 ... -
在$(document).ready(或window.onload)中使用setInterval和setTimeout问题
2013-02-27 15:36:58方法定义在 $(document).ready(function(){})(或window.onload=function(){})里面的话,执行定时器的时候 会找不到方法的,会提示缺少对象的错误,解决方法如下: 方法1. 将方法定义为函数表达式的形式,变量... -
JS中for循环中使用同一变量的方法及案例
2021-07-14 18:32:13JS中for循环中使用同一变量的方法方法案例 方法 方法一(使用较简单):使用let定义变量,let用来声明它的作用域的变量。 for (let i = 0; i < 10; i++) { div[i].onmouseout = function () { div[i].style.... -
如何让body 里的 onload 方法在加载该页面时执行一次,刷新不执行
2020-11-23 21:06:29在做一个网站的弹窗设计,希望只在进入首页的时候执行这个方法出现弹窗,之后再刷新时不要出现弹窗,用了Cookie方法没有效果(很迷惑...),用window自带的name属性相当于设个全局变量做标记,非常的简单!... -
【零基础专属方法】html调用本地python程序进行交互 前后端交互
2022-01-06 20:26:24HTML调用本地python程序,实现前后端实时交互,项目展示 -
日常-js原生for循环绑定事件时,引用循环里的变量,发现只是最后值的问题
2020-02-24 15:59:05今日疑惑:大for套小for,在非严格模式下, for (var i =5; i >= 0; i--) { // console.log(i);...//window对象 for (var j =5; j >= 0; j--) { // console.log(i);5 4 3 2 1 0各六遍 ... -
JS Window.Open 打开窗口详解
2018-07-30 13:07:35一、window.open()支持环境:JavaScript1.0+/JScript1.0+/Nav2+/IE3+/Opera3+二、基本的语法:window.open(pageURL,name,pa -
百度人工智能API的调用_微信小程序。
2020-11-24 15:12:15通过微信小程序开发调用百度人工智能接口,从而实现很多有趣的功能。 文章目录微信小程序--智能接口前言一、百度智能云的认识1-1 注册1-2 页面说明1-3 功能初识1-4 api 接口二、百度智能接口的创建2-1 创建接口2-1... -
JS中的定时器和循环定时器以及简单的页面倒计时案例
2021-12-23 14:21:04本文将介绍定时器 setTimeout 的三种调用方式,会介绍取消定时器 clearTimeout ,会介绍循环定时器 setInterval 以及取消循环定时器 clearInterval 1. 定时器:setInterval //1. setTimeout("JS语句",在多少... -
前端:JS/24/BOM和DOM简介,for...in循环遍历,window对象的属性和方法,延时器,定时器,screen屏幕对象,...
2020-05-11 20:11:46浏览器组件:window(浏览器容器), location(地址栏), history(浏览器历史), screen(显示器屏幕), navigator(浏览器软件), document(网页); DOM,Document Object Model,文档对象模型 DOM主要提供了访问和操作... -
JavaScript闭包及实现循环绑定事件
2014-12-14 23:53:48window.onload=buttonInit; <button id="button1">Button1 <button id="button2">Button2 <button id="button3">Button3 当注册事件结束后,i的值为4,当点击按钮时,事件函数即function(){ alert(... -
for循环 添加点击事件时 出现总是加到最后一个元素上的问题
2019-09-29 03:52:46原因是:函数调用外部变量时构成了闭包,里面的变量会受到影响,所以声明成一个只有自己可以访问的闭包即可: ...window.onload = function(){ var divs = document.getElementsByTagName("div"); for(var i = 0; ... -
JS中for循环如何令变量每次增量不是1?
2018-09-12 12:26:39for循环的常见格式是for(var i=0;i<arr.length;i++){……}。对于有些情况下,需要间隔获取对象,采用加1的循环虽然可以通过设置条件来实现,但是直接从for循环的变量增量着手也可以一步到位。 for循环增量... -
如何从异步调用返回响应?
2019-11-28 09:09:00xhr.onload = function() { resolve(this.responseText); }; xhr.onerror = reject; xhr.open('GET', url); xhr.send(); }); } ajax("/echo/json") .then(function(result) { // Code depending on result... -
连续调用location.href引发的问题
2022-01-15 00:20:57原来是historyHanding在作怪 【解决方案】区分historyHanding是否会被置为replace的关键点在于找到Document is completely loaded的时点,经在chrome浏览器里验证,通过window.onload方法无法判断,通过$(document).... -
键盘事件、 BOM和DOM、window、location、navigator、history对象、this指向问题、 JS执行机制(事件循环)
2021-11-21 13:14:061.1. 常用的键盘事件 1.1.1 键盘事件 三个事件的执行顺序 keydown – keypress – keyup 1.1.2 键盘事件对象 使用keyCode属性判断用户按下哪个键 ...1.2.4. window对象的常见事件 页面(窗口)加载事件(2种