精华内容
下载资源
问答
  • js函数自动执行(附:window.onload与$(document
    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事件处理函数: 大家知道当文档内容完全加载完毕的时候就会触发window.onload事件,进而执行事件处理函数。 不过利用window.onload注册事件处理函数的时候只能进行一次,...
    javascript模拟实现多次使用window.onload事件处理函数:
    大家知道当文档内容完全加载完毕的时候就会触发window.onload事件,进而执行事件处理函数。
    不过利用window.onload注册事件处理函数的时候只能进行一次,因为后面的会将前面的覆盖,代码如下:
    [JavaScript]  纯文本查看  复制代码 运行代码
    1
    2
    window.onload=func;
    window.onload=anotherFunc;

    在上面的代码中,如果事件触发,只会第二个事件处理函数anotherFunc。
    下面就模拟一下如何实现注册多个事件处理函数的功能,代码如下:
    [JavaScript]  纯文本查看  复制代码 运行代码
    01
    02
    03
    04
    05
    06
    07
    08
    09
    10
    11
    12
    13
    14
    15
    16
    function 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();
      };
    }如果原来没有注册,那么一切按照老思路。
    展开全文
  • 项目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后问题解决。

    展开全文
  • } // 移动文字 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>
    
    展开全文
  • }函数自动执行方法一:window.onload=myFunction();注:`<1>window.onload://只有当页面中的HTML结构、图片、文字等所有资源都加载完成才会执行对应的操作 (在一个页面中只能使用一次,使用多次后面会把前面的...
  • 在DOM完全就绪时就可以被调用,此时,网页的所有元素对JQuery而言都是可以访问的,但是这并不意味着这些元素关联的文件都已经下载完毕 编写个数: window.onload不能同时编写多个,而$(document).ready()能同时编写多个 ...
  • JS window对象详解

    2021-03-13 02:47:34
    window 是客户端浏览器对象模型的基类,window 对象是客户端 JavaScript 的全局对象。一个 window 对象实际上就是一个独立的窗口,对于框架页面来说,浏览器窗口每个框架都包含一个 window 对象。全局作用域在客户端...
  • 在使用javascript过程中,想循环遍历一个数组,经常使用的语法有两种:for (var i; i < array.length; i++) {statement;}for (var i in array) {statement;}这两种用法看起来能做同样的事情,但实际上两个循环的...
  • 在vue项目中做表格增加行的时候,校验行内单元格某些字段的必填项,刚开始使用forEach进行循环遍历数组对象,然后判断对象的键值是否为空,为空则跳出循环,提示需要填写必填项,否则提示进行增加行。 forEach形式...
  • for循环读取i值

    千次阅读 2019-03-02 16:06:30
    window.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:35
    var 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对象element为空,打破循环引用 function assignHandler() {  var element=document.getElementById("div1");  var id=element.id;  element.onclick=function() //element的onclick引用...
  • js循环请求接口

    千次阅读 2019-03-07 17:37:20
    window.onload=function(){ setInterval(publicBusi,1000*60*1);//这里的1000表示1秒有1000毫秒,1分钟有60秒,7表示总共1分钟 } var number= $("#value").html(); function publicBusi(){ var url="...
  • window.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(function(){})(或window.onload=function(){})里面的话,执行定时器的时候 会找不到方法的,会提示缺少对象的错误,解决方法如下:   方法1. 将方法定义为函数表达式的形式,变量...
  • JS中for循环中使用同一变量的方法方法案例 方法 方法一(使用较简单):使用let定义变量,let用来声明它的作用域的变量。 for (let i = 0; i < 10; i++) { div[i].onmouseout = function () { div[i].style....
  • 在做一个网站的弹窗设计,希望只在进入首页的时候执行这个方法出现弹窗,之后再刷新时不要出现弹窗,用了Cookie方法没有效果(很迷惑...),用window自带的name属性相当于设个全局变量做标记,非常的简单!...
  • HTML调用本地python程序,实现前后端实时交互,项目展示
  • 今日疑惑:大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
  • 通过微信小程序开发调用百度人工智能接口,从而实现很多有趣的功能。 文章目录微信小程序--智能接口前言一、百度智能云的认识1-1 注册1-2 页面说明1-3 功能初识1-4 api 接口二、百度智能接口的创建2-1 创建接口2-1...
  • 本文将介绍定时器 setTimeout 的三种调用方式,会介绍取消定时器 clearTimeout ,会介绍循环定时器 setInterval 以及取消循环定时器 clearInterval 1. 定时器:setInterval //1. setTimeout("JS语句",在多少...
  • 浏览器组件:window(浏览器容器), location(地址栏), history(浏览器历史), screen(显示器屏幕), navigator(浏览器软件), document(网页); DOM,Document Object Model,文档对象模型 DOM主要提供了访问和操作...
  • JavaScript闭包及实现循环绑定事件

    千次阅读 2014-12-14 23:53:48
    window.onload=buttonInit; <button id="button1">Button1 <button id="button2">Button2 <button id="button3">Button3 当注册事件结束后,i的值为4,当点击按钮时,事件函数即function(){ alert(...
  • 原因是:函数调用外部变量时构成了闭包,里面的变量会受到影响,所以声明成一个只有自己可以访问的闭包即可: ...window.onload = function(){ var divs = document.getElementsByTagName("div"); for(var i = 0; ...
  • for循环的常见格式是for(var i=0;i&lt;arr.length;i++){……}。对于有些情况下,需要间隔获取对象,采用加1的循环虽然可以通过设置条件来实现,但是直接从for循环的变量增量着手也可以一步到位。 for循环增量...
  • 如何从异步调用返回响应?

    千次阅读 2019-11-28 09:09:00
    xhr.onload = function() { resolve(this.responseText); }; xhr.onerror = reject; xhr.open('GET', url); xhr.send(); }); } ajax("/echo/json") .then(function(result) { // Code depending on result...
  • 原来是historyHanding在作怪 【解决方案】区分historyHanding是否会被置为replace的关键点在于找到Document is completely loaded的时点,经在chrome浏览器里验证,通过window.onload方法无法判断,通过$(document)....
  • 1.1. 常用的键盘事件 1.1.1 键盘事件 三个事件的执行顺序 keydown – keypress – keyup 1.1.2 键盘事件对象 使用keyCode属性判断用户按下哪个键 ...1.2.4. window对象的常见事件 页面(窗口)加载事件(2种

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 20,303
精华内容 8,121
关键字:

windowonload循环调用