JavaScript中setTimeout与setInterval的使用详解

作者:木棉

时间:2026-10-22

浏览:250

本文深入解析JavaScript中setTimeout与setInterval两种定时器的核心机制。详细对比两者在单次执行与循环执行上的区别,阐述如何通过setTimeout模拟setInterval功能,并演示clearTimeout与clearInterval的正确清除方式,帮助开发者掌握定时器的高效使用与内存管理。

文章目录

具体实现逻辑见下方代码截图,欢迎交流探讨,共同进步。如有不足之处,敬请指正,毕竟初学者仍在成长中。接下来直接通过具体实例代码进行说明。


<!DOCTYPE html> 
<html lang="en"> 
<head> 
  <meta charset="UTF-8"> 
  <title>Title</title> 
</head> 
<body> 
<div class="wraper"></div> 
<div class="wraper1">abcd123441223432 </div> 
<button onclick="clearIt=window.clearInterval(clearIt)"> 
  Stop</button> 
<script> 
  window.onload = function () { 
    $('.wraper').html('12343242342') 
    setTimeout(function () { 
      $('.wraper').hide(); 
      setTimeout(function () { 
        $('.wraper1')[0].style.backgroundColor = 'red'; 
        console.log(new Date(),"in"); 
      },20000); 
      console.log(new Date(),"out"); 
    },10000); 
  } 
  var clearIt=self.setInterval("setIntervalTest()",1000); 
  function setIntervalTest () { 
    console.log('++++'); 
  } 
</script> 
<script type="text/javascript" src="jquery/jquery-min.js"></script> 
</body> 
</html> 

setTimeout与setInterval的相同点setTimeout与setInterval的相同点setTimeout与setInterval的相同点

setTimeout与setInterval的相同点

补充内容:下面将详细分析setTimeout和setInterval的相同点及不同点。

setTimeout和setInterval的相同点

setTimeout和setInterval均为window对象的定时方法,语法结构基本一致。两者均接收两个参数:第一个是待执行的代码字符串,第二个是以毫秒为单位的时间间隔。当指定的时间间隔到达后,系统将执行对应的代码。

setTimeout与setInterval的区别

setTimeout和setInterval的区别

setTimeout方法用于定义定时程序,即指定在多久之后执行某项操作。该操作执行完毕后即结束,不会重复执行。

setInterval方法则表示每隔固定的时间间隔反复执行某项操作,直到被手动清除。

若需使用setTimeout实现setInterval的功能,必须在执行的代码内部再次调用setTimeout来定时调用自身,从而形成循环调用的效果。

定时器的清除方法

若要清除定时器,需根据创建定时器时使用的具体方法,调用对应的清除函数:

例如:


timer=setTimeout('startShow()',2000);
clearTimeout(timer);

或者:


timer=setInterval('startShow()',2000);
clearInterval(timer);

以上介绍了JavaScript中setTimeout与setInterval的基本使用方法,希望能对大家有所帮助。如有任何疑问,欢迎留言,小编会及时回复。同时也感谢大家对本站的支持!

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章