<i id='oOJuO'><tr id='oOJuO'><dt id='oOJuO'><q id='oOJuO'><span id='oOJuO'><b id='oOJuO'><form id='oOJuO'><ins id='oOJuO'></ins><ul id='oOJuO'></ul><sub id='oOJuO'></sub></form><legend id='oOJuO'></legend><bdo id='oOJuO'><pre id='oOJuO'><center id='oOJuO'></center></pre></bdo></b><th id='oOJuO'></th></span></q></dt></tr></i><div id='oOJuO'><tfoot id='oOJuO'></tfoot><dl id='oOJuO'><fieldset id='oOJuO'></fieldset></dl></div>

      <legend id='oOJuO'><style id='oOJuO'><dir id='oOJuO'><q id='oOJuO'></q></dir></style></legend>

      1. <small id='oOJuO'></small><noframes id='oOJuO'>

      2. <tfoot id='oOJuO'></tfoot>
          <bdo id='oOJuO'></bdo><ul id='oOJuO'></ul>

        js超时调用setTimeout和间歇调用setInterval实例分析

        时间:2023-12-08

          • <bdo id='Vo1va'></bdo><ul id='Vo1va'></ul>

            <legend id='Vo1va'><style id='Vo1va'><dir id='Vo1va'><q id='Vo1va'></q></dir></style></legend>

                <tbody id='Vo1va'></tbody>
                <tfoot id='Vo1va'></tfoot>
                <i id='Vo1va'><tr id='Vo1va'><dt id='Vo1va'><q id='Vo1va'><span id='Vo1va'><b id='Vo1va'><form id='Vo1va'><ins id='Vo1va'></ins><ul id='Vo1va'></ul><sub id='Vo1va'></sub></form><legend id='Vo1va'></legend><bdo id='Vo1va'><pre id='Vo1va'><center id='Vo1va'></center></pre></bdo></b><th id='Vo1va'></th></span></q></dt></tr></i><div id='Vo1va'><tfoot id='Vo1va'></tfoot><dl id='Vo1va'><fieldset id='Vo1va'></fieldset></dl></div>
              1. <small id='Vo1va'></small><noframes id='Vo1va'>

                • JS超时调用setTimeout和间歇调用setInterval实例分析

                  setTimeout函数

                  setTimeout函数是JS中的一个高级函数,可以实现代码的延时执行。

                  语法:

                  setTimeout(function, delay, param1, param2, ...)
                  
                  • function:必选参数,是需要延时执行的函数或一个字符串经过编译生成的JS代码
                  • delay:必选参数,是延时时间,单位是毫秒
                  • param1,param2...:可选参数,是指向要传递给函数的参数,最多可以传递个数个函数的参数,参数可以是任何类型

                  使用示例:

                  // 延时1秒后,弹出“hello world”
                  setTimeout(function(){
                      alert("hello world");
                  }, 1000);
                  

                  setInterval函数

                  setInterval函数是JS中的一个高级函数,可以实现代码的循环定时执行。

                  语法:

                  setInterval(function, delay, param1, param2, ...)
                  
                  • function:必选参数,是需要循环定时执行的函数或一个字符串经过编译生成的JS代码
                  • delay:必选参数,是定时执行的时间间隔,单位是毫秒
                  • param1,param2...:可选参数,是指向要传递给函数的参数,最多可以传递个数个函数的参数,参数可以是任何类型

                  使用示例:

                  // 每隔1秒弹出“hello world”
                  setInterval(function(){
                      alert("hello world");
                  }, 1000);
                  

                  setTimeout与setInterval的差异

                  setTimeout和setInterval两个函数虽然都可以实现延时执行JS代码,但是它们在实现方式上有差别。

                  • setTimeout函数只执行一次,执行完毕后结束;
                  • setInterval函数则可以在指定的时间间隔内无限循环执行。

                  注意事项

                  使用setTimeout或setInterval函数时,需要注意以下点:

                  1. 如果设置的时间间隔(delay)小于4毫秒,那么函数可能会被延迟执行或者忽略执行;
                  2. 如果设置了系统休眠模式,则setTimeout和setInterval函数可能会被暂停执行,直到系统重新被唤醒;
                  3. 当页面不处于激活状态(例如被最小化、后台运行等),setInterval函数会被暂停执行。

                  示例说明

                  示例一:倒计时

                  function countDown(){
                      var countdownDom = document.getElementById('countdown');
                      var time = parseInt(countdownDom.innerHTML);
                      time -= 1;
                      if(time <= 0){
                          clearTimeout(timerId);
                          countdownDom.innerHTML = "倒计时结束";
                      }else {
                          countdownDom.innerHTML = time;
                      }
                  }
                  
                  // 倒计时开始
                  var timerId = setInterval(countDown, 1000);
                  

                  上述代码实现了一个简单的倒计时效果,每隔1秒钟更新一次倒计时数字,当倒计时结束后,停止执行,显示倒计时结束。

                  示例二:动画效果

                  var square = document.getElementById('square');
                  var step = 1;
                  function animation(){
                      if(step < 100){
                          square.style.left = (step++) + "px";
                          setTimeout(animation, 10);
                      }
                  }
                  
                  // 动画效果开始
                  animation();
                  

                  上述代码实现了一个简单的动画效果,将一个div元素从左向右移动,每10毫秒移动一个像素,当移动到100像素后,停止执行。

                  上一篇:如何自己实现JavaScript的new操作符 下一篇:前端常见的安全问题以及防范措施总结大全

                  相关文章

                  <small id='OTZKW'></small><noframes id='OTZKW'>

                • <legend id='OTZKW'><style id='OTZKW'><dir id='OTZKW'><q id='OTZKW'></q></dir></style></legend>

                  1. <i id='OTZKW'><tr id='OTZKW'><dt id='OTZKW'><q id='OTZKW'><span id='OTZKW'><b id='OTZKW'><form id='OTZKW'><ins id='OTZKW'></ins><ul id='OTZKW'></ul><sub id='OTZKW'></sub></form><legend id='OTZKW'></legend><bdo id='OTZKW'><pre id='OTZKW'><center id='OTZKW'></center></pre></bdo></b><th id='OTZKW'></th></span></q></dt></tr></i><div id='OTZKW'><tfoot id='OTZKW'></tfoot><dl id='OTZKW'><fieldset id='OTZKW'></fieldset></dl></div>
                  2. <tfoot id='OTZKW'></tfoot>

                      <bdo id='OTZKW'></bdo><ul id='OTZKW'></ul>