• js setTimeout 与 setInterval 以及 for 循环 刷新UI


    1. setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式;执行一次;

       如果需要执行多次,自身再次调用 setTimeout();

      示例:无穷循环并带停止按钮的

    <html>
    <head>
    <script type="text/javascript">
    var c=0
    var t
    function timedCount()
    {
    document.getElementById('txt').value=c
    c=c+1
    t=setTimeout("timedCount()",1000)
    }
    
    function stopCount()
    {
    clearTimeout(t)
    }
    </script>
    </head>
    
    <body>
    <form>
    <input type="button" value="开始计时!" onClick="timedCount()">
    <input type="text" id="txt">
    <input type="button" value="停止计时!" onClick="stopCount()">
    </form>
    
    <p>
    请点击上面的“开始计时”按钮。输入框会从 0 开始一直进行计时。点击“停止计时”可停止计时。
    </p>
    
    </body>
    
    </html>

    2. setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式;

    setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。

    示例:

    <html>
    <body>
    
    <input type="text" id="clock" size="35" />
    <script language=javascript>
    var int=self.setInterval("clock()",50)
    function clock()
      {
      var t=new Date()
      document.getElementById("clock").value=t
      }
    </script>
    <button onclick="int=window.clearInterval(int)">Stop interval</button>
    
    </body>
    </html>

    二:扩展

    1. 使用 setTimeout 和 setInterval 不会阻塞js网页的单线程页面操作;比如用js 改变页面的图片或,页面上的文字;

    通常使用 for 循环 会影响页面的操作;

            function test()
            {
                //假如 /tmp/ 目录下有4张图片,分别是 test0-3.png
                //如下js 改变 id为 testIMG 的图片;
                for(var i=0;i<4;i++)
                {
                    alert(i);
                    document.getElementById("testIMG".src="/tmp/test"+String(i)+".png";
                }
                
                //运行结果,在网页上,会依次弹出 4次 alert;但是图片不会依次切换,而是要等到最后一次,显示最后一张图片;
            }

    所以,上面的问题要 使用 setTimeout, setInterval 操作;

    2. 还有一点,js 对于 同一个 id 的 img标签;在两次改变图片时,,如果图片的名字一样,,图片不一样,,图片不会改变;

    即是 第一次 js 改变图片 为 a.png;

    第二次 a.png 图片发生变化了,但是名字还是 a.png;但是此时用js 改变时,页面上的图片不会刷新

    参考:http://www.w3school.com.cn/jsref/met_win_settimeout.asp

    http://www.w3school.com.cn/jsref/met_win_setinterval.asp

  • 相关阅读:
    Git:五、操作远程仓库
    Git:四、连接GitHub远程仓库
    Git:三、工作原理
    Git:二、本地文件操作
    Git:一、简介&安装Git 2.20.1——Mac&Win
    Web前端:博客美化:四、网易云音乐单曲播放器
    设计模式之代理模式(proxy pattern)
    OpenCC的编译与多语言使用
    唯一标识符漫谈
    vscode local attach 和 remote debug
  • 原文地址:https://www.cnblogs.com/cocoajin/p/4319384.html
Copyright © 2020-2023  润新知