javascript延时setTimeOut与定时setInterval函数区别

淡淡的烟草味﹌ 2023-10-10 10:58 42阅读 0赞

**1、js延时函数setTimeOut(回调函数,延时时间)**

应用：希望页面等待一段时间之后去做某一件事情（只做一次）。

定义延时函数：

<script type="text/javascript">
    		var i=0;	
    		//调用延时执行，等待5秒之后去执行回调函数
    		window.setTimeout("setOutalert()",5000);
    			
    		function setOutalert(){
        
    			alert("延时执行");
    		}
    		//######################
    		//回调函数还可以这样定义
    		window.setTimeout(function(){
        
               alert("内部定义回调函数");
    		},5000);
    	</script>

怎么取消延时执行呢？（万一能够用到呢？）

取消延时：在延时函数还没有被调用之前可以取消执行（不然还取消干啥？）

<script type="text/javascript">
    		var i=0;	
    		//调用延时执行，等待5秒之后去执行回调函数
    		var stopSetTimeOutVal=window.setTimeout("setOutalert()",5000);
    		//定义一个三秒的延时去取消五秒的延时
    		window.setTimeout("setOutalertForThree()",3000);
    
    		function setOutalertForThree(){
        
    			window.clearTimeout(stopSetTimeOutVal);
    		}
    			
    		function setOutalert(){
        
    			alert("延时执行");
    		}
    		//######################
    		//回调函数还可以这样定义
    		window.setTimeout(function(){
        
               alert("内部定义回调函数");
    		},5000);
    	</script>

**2、js定时setInterval(回调函数,定时执行时间)函数**

应用：页面需要每隔一段时间去做一件事情（不停止就老做）

定义：

<script type="text/javascript">
    		var i=0;
    			
    		var stopInterval=window.setInterval("setAddOne()",1000);
    		
    		function setAddOne(){
        
    			console.log("定时回调函数："+i++)
    		}
    		//#######################
    		//同延时执行的定义一样，它还可以这样定义
    		setInterval(function(){
        
    			//定时回调函数，定时的回调函数也可以定义在外面
    			console.log("定时："+i++)
    		},1000);
    	</script>

定时函数同样可以取消（直接离开这个页面它也不执行了），使用一个延时函数去取消定时

<script type="text/javascript">
    		var i=0;
    		//定时执行
    		var stopInterval=window.setInterval("setAddOne()",1000);
    		
    		function setAddOne(){
        
    			console.log("定时回调函数："+i++)
    		}
    		
    		//延时执行去停止定时执行
    		window.setTimeout("setOutalert()",5000);
    		
    		function setOutalert(){
        
    			//alert("延时执行");
    			window.clearInterval(stopInterval);
    			console.log("停止定时执行");
    		}
    	</script>

发表评论取消回复

表情：

评论列表（有 0 条评论，42人围观）

还没有评论，来说两句吧...

相关阅读

相关 javascript延时setTimeOut与定时setInterval函数区别

1、js延时函数setTimeOut(回调函数,延时时间) 应用：希望页面等待一段时间之后去做某一件事情（只做一次）。定义延时函数： <script type=

淡淡的烟草味﹌/ 2023年10月10日 10:58/ 0 赞/ 43 阅读

相关（九）vue定时setInterval与延迟setTimeout

一、定时函数setInterval，销毁定时clearTimeout。如页面没隔10s从后台获取下当前时间 <template> <div>时间{

向右看齐/ 2023年07月23日 07:00/ 0 赞/ 14 阅读

相关 setInterval与setTimeout区别详解

17javascript会员们都知道，setInterval和setTimeout这两个函数有什么作用，下面17javascript来详细说明他们的区别。 s

爱被打了一巴掌/ 2022年08月13日 06:59/ 0 赞/ 273 阅读

相关 JavaScript定时调用函数(SetInterval与setTimeout)

setTimeout和setInterval的语法相同。它们都有两个参数，一个是将要执行的代码字符串，还有一个是以毫秒为单位的时间间隔，当过了那个时间段之后就将执行那段代码。

男娘i/ 2022年08月11日 16:36/ 0 赞/ 203 阅读

相关 javaScript知识点总结-----setTimeout setInterval 区别

setTimeout和setInterval的语法相同。它们都有两个参数，一个是将要执行的代码字符串，还有一个是以毫秒为单位的时间间隔，当过了那个时间段之后就将执行那段代码。

深碍√TFBOYSˉ_/ 2022年07月17日 00:11/ 0 赞/ 196 阅读

相关 JavaScript 计时事件[setInterval(),setTimeout()]

JavaScript 计时事件通过使用 JavaScript，我们有能力作到在一个设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行。我们称之为计时事件。

秒速五厘米/ 2022年06月08日 02:56/ 0 赞/ 253 阅读

相关 javascript setInterval不能正确延时

javascript是一个单线程语言，只有一个主线程在程序中运行，如果有io请求，是浏览器的线程池（注意：浏览器是多线程的）去处理，等结果放回（把回调放回到主线程的执行队列中，

不念不忘少年蓝@/ 2022年06月02日 04:25/ 0 赞/ 191 阅读

相关 JS setTimeout()与setInterval()的区别

JS `setTimeout()`与`setInterval()`的区别 `setTimeout()`和`setInterval()`的基本用法我们一带而过: >

柔情只为你懂/ 2021年11月18日 00:02/ 0 赞/ 494 阅读

相关 setInterval()和setTimeout()区别

定义 setTimeout()和setInterval()经常被用来处理延时和定时任务。setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式,而setIn

我就是我/ 2021年06月22日 15:36/ 0 赞/ 547 阅读

相关 JS 中 setTimeout 与 setInterval 区别

JS 中 setTimeout 与 setInterval 区别 setTimeout方法的作用是在指定的毫秒数后执行函数或表达式，而setInterval方法则是在每隔...

小灰灰/ 2020年06月02日 11:56/ 0 赞/ 985 阅读