实现延迟任务的方法及代码实例（前端）

最新推荐文章于 2024-12-05 11:10:09 发布
最新推荐文章于 2024-12-05 11:10:09 发布
阅读量950 收藏
点赞数
CC 4.0 BY-SA版权
文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/AvskBug/article/details/133444059
前端 专栏收录该内容
299 篇文章 ¥59.90 ¥99.00
订阅专栏
本文介绍了前端开发中实现延迟任务的三种方法：setTimeout函数、Promise结合setTimeout以及async/await配合setTimeout。通过示例代码展示如何延迟执行任务，以优化用户体验和页面加载性能。

延迟任务是在特定的时间间隔后执行的任务。在前端开发中，我们经常需要延迟执行一些操作，比如延迟加载资源、延迟显示提示信息等。本文将介绍几种在前端实现延迟任务的方法，并提供相应的源代码。

方法一：使用setTimeout函数
setTimeout函数是JavaScript中提供的一种延迟执行任务的方法。它接受两个参数：要执行的函数和延迟的毫秒数。

setTimeout(function() {
   
   
  // 要延迟执行的任务
}, 延迟的毫秒数);

下面是一个示例，延迟500毫秒后在控制台输出一条消息：


                

                
                
        

    


  


        

                

                  

                  

                  了解本专栏
                  
                  
                    
                  订阅专栏 解锁全文
                   
                

        


    



                



	

		

			

				
					
延时执行JavaScript代码

				
			

			

				

					DevGlider的博客
				

				

					09-22
					
					4217
					
				

			

		

		

			
				
在上面的例子中，我们传递了一个匿名函数作为第一个参数，这个函数包含了我们要延时执行的代码。函数接受两个参数：要执行的代码块以及延时的时间（以毫秒为单位）。延时执行代码在很多场景中都非常有用，比如在网页加载完成后执行某些操作、创建动画效果或者实现用户交互等。你可以根据需要调整延时的时间，例如如果你希望延时5秒执行，可以将第二个参数改为5000。另外，如果你想要在延时执行的代码中传递参数，可以在匿名函数中使用参数。，然后在延时执行的代码块中可以使用这些参数。在上面的例子中，我们通过在。函数来延时执行一段代码。

			
		

	



                

            
              



	

		

			

				
					
前端领域借助 Node.js 实现前端代码的自动化部署

				
			

			

				

					AI架构全栈开发实战笔记
				

				

					05-08
					
					1242
					
				

			

		

		

			
				
随着前端项目复杂度提升，手动部署面临效率低下、错误频发、环境不一致等问题。本文聚焦Node.js技术栈，系统讲解如何通过构建工具、脚本编程、CI/CD集成实现端到端的自动化部署，覆盖从代码提交到生产环境发布的全流程。案例基于主流前端框架（React/Vue），适配静态资源部署、单页应用（SPA）、微前端架构等场景。核心概念：解析Node.js在自动化部署中的核心能力，构建工具与部署流程的关系技术实现：分模块讲解构建、打包、传输、部署的具体实现方案实战案例：完整演示从本地开发到服务器上线的全链路脚本编写。

			
		

	



              


  
              

                


	

		

			

				
					
延时函数程序

				
			

			

				

					05-14
				

			

		

		

			
				
stm32的延时函数
/修正了中断中调用出现死循环的错误
//防止延时不准确,采用do while结构!
//////////////////////////////////////////////////////////////////////////////////	 
static u8  fac_us=0;//us延时倍乘数
static u16 fac_ms=0;//ms延时倍乘数
//初始化延迟函数
//SYSTICK的时钟固定为HCLK时钟的1/8
//SYSCLK:系统时钟
void delay_init(u8 SYSCLK)
{
	SysTick->CTRL&=0xfffffffb;//bit2清空,选择外部时钟  HCLK/8
	fac_us=SYSCLK/8;		    
	fac_ms=(u16)fac_us*1000;
}

			
		

	





	

		

			

				
					
延迟函数(stm32f103)

				
			

			

				

					11-08
				

			

		

		

			
				
延迟函数 delay.h  delay.c  SysTick时钟配置 us ms延迟

			
		

	



		

			
		



	

		

			

				
					
前端处理延时的两种方法（setTimeout、setInterval）

				
			

			

				

					qq_63578903的博客
				

				

					09-20
					
					836
					
				

			

		

		

			
				
setTimeout。

			
		

	





	

		

			

				
					
web前端工作笔记008---js延迟执行代码

				
			

			

				

					添柴程序猿的专栏
				

				

					09-29
					
					511
					
				

			

		

		

			
				
技术交流QQ群【JAVA,C++,Python,.NET,BigData,AI】：170933152

setTimeout( function(){//add your code}, 5 * 1000 );//延迟5000毫秒

这个挺好用,之前发现有刷新,执行顺序等出现问题的时候都可以用这个解决

有时候,不需要延迟设置很大,设置成1就可以.
...

			
		

	





	

		

			

				
					
基于Redis实现的高效延迟任务队列系统.zip

					
最新发布

				
			

			

				

					06-08
				

			

		

		

			
				
基于Redis实现的高效延迟任务队列系统涉及到的关键技术点包括：Redis数据类型与操作的使用、有序集合在延迟任务管理中的应用、Pub/Sub机制在任务触发中的应用、任务持久化策略以及系统扩展性考虑。通过综合运用这些...

			
		

	





	

		

			

				
					
前端实现【 批量任务调度管理器 】demo优化

				
			

			

				

					鹤渺的星球
				

				

					07-29
					
					1556
					
				

			

		

		

			
				
我在前文实现过一个【批量任务调度管理器】的 demo，能实现简单的任务批量并发分组，过滤等操作。但是还有很多优化空间，所以查找一些优化的库，主要想优化两个方面，上篇提到的：针对 3，其实可以自己手写一个，也可以依靠 如什么来实现。针对 2，最难的是根据【当前系统负载或网络状况调整并发请求数量】，这必须需要引入一个检测系统的东西。而动态调整数量，我现在的代码其实已经可以满足，我只是无法【获取当前系统负载或网络状况】。对上面的功能主要做了队列并发处理，简单的动态检测系统网络是否连接然后中断请求的处理，算是优化了

			
		

	





	

		

			

          精选资源
				
					
docx和xlsx的前端生成完整实例代码 report-js.rar

				
			

			

				

					02-21
				

			

		

		

			
				
这个实例代码展示了如何在前端实现这一功能，避免了服务器交互，提高了用户体验。  总结来说，这个压缩包提供的是一套完整的前端解决方案，让开发者能够在浏览器中生成具有复杂格式的docx和xlsx文件。利用...

			
		

	





	

		

			

				
					
delay函数代码

				
			

			

				

					m0_59379785的博客
				

				

					10-10
					
					2657
					
				

			

		

		

			
				
delay.c、delay.h代码如下

			
		

	





	

		

			

				
					
前端 延时器 setTimeout 和定时器 setInterval 注意事项

				
			

			

				

					lzfengquan的博客
				

				

					12-09
					
					7193
					
				

			

		

		

			
				
不管是vue还是react项目中，我们多多少少都会用到延时器和定时器，我目前项目中延时器用的最多，定时器几乎不用
理解概念：
延时器：setTimeout ， 顾名思义延时就是不会立即执行会等到设置的时间到了之后立即执行，也就是说只有满足条件的时候才会执行且只会执行一次。
var Date1 = setTimeout(function() {
  console.log(new Date())
},1000)  // 1秒后执行打印功能

定时器：setInterval，字面意思就是定时多久执行，也就是说会

			
		

	





	

		

			

				
					
设定延迟执行的代码

				
			

			

				

					m0_74132943的博客
				

				

					10-16
					
					744
					
				

			

		

		

			
				
延迟执行的代码是指在指定时间内不立即执行，而是等一段时间后再执行的代码。例如，以下代码会在 3 秒后返回一个字符串 "Hello, World!例如，以下代码会在 3 秒后输出 "Hello, World!：异步操作完成后调用的函数，该函数接受一个参数，表示异步操作的结果。：异步操作发生错误时调用的函数，该函数接受一个参数，表示错误信息。函数可以延迟一段时间后执行指定的函数。：要执行的函数或要调用的代码。：要执行的函数或要调用的代码。：传递给函数的参数（可选）。：传递给函数的参数（可选）。

			
		

	





	

		

			

				
					
延时函数编写

					
热门推荐

				
			

			

				

					luoyir1997的博客
				

				

					04-23
					
					1万+
					
				

			

		

		

			
				
假设要让LED1亮1.简单的延时函数：函数声明：void Delay（_IO u32 nCount）
{
 for(;nCount!=0;i--)}函数调用：while（1）
{
...;
LED1(ON);
Delay（0XFFFEF);
}2.C语言函数使用规范：return_type/*类型*/ function_name/*函数名*/( parameter list /*参数*/)
{
 ...

			
		

	





	

		

			

				
					
js延时函数_【大前端01-01】函数式编程与JS异步编程、手写Promise

				
			

			

				

					weixin_39698217的博客
				

				

					11-29
					
					219
					
				

			

		

		

			
				
【简答题】一、谈谈你是如何理解JS异步编程的，EventLoop、消息队列都是做什么的，什么是宏任务、什么是微任务？如何理解JS异步编程众所周知JavaScript语言执行环境是“单线程”（单线程，就是指一次只能完成一件任务，如果有多个任务就必须排队等候，前面一个任务完成，再执行后面一个任务）。这种“单线程”模式执行效率较低，任务耗时长。   为了解决这个问题，提出了“异步模式”(异步模式，是指后...

			
		

	





	

		

			

				
					
延时函数

				
			

			

				

					董鑫爷爷他大舅的博客
				

				

					01-26
					
					3922
					
				

			

		

		

			
				
定义的延时函数（单片机中）
 
void delay_ms(const uint16 ms)
{
     uint16 i,j;
     for ( i=0;i
     {
          for ( j=0;j
          {
               _nop();
          }
     }
}
 
 
void delay_s(

			
		

	





	

		

			

				
					
vue延时执行函数

				
			

			

				

					1281024的博客
				

				

					05-10
					
					978
					
				

			

		

		

			
				
我为element-ui的按钮设置了点击后的样式，但是不能点击后生效，发现是因为点击按钮后调用的请求函数是异步的，调用函数查询时，查询到的数据是还没有修改的数据（即查询函数调用的太快了，修改的数据还没有生效），故需要进行延时查询数据。我要获取orderId的数据，由这个数据决定按钮的样式，而我的按钮操作会修改数据库里的这个数据，然后再次进行查询数据渲染。一定要创建一个timer，然后调用延时之前先清除timer的延时。进行延时调用方法，即可查出修改后的数据。

			
		

	





	

		

			

				
					
前端settimeout延后执行

				
			

			

				

					weixin_42058525的博客
				

				

					12-05
					
					576
					
				

			

		

		

			
				
‌‌在JavaScript中，setTimeout和setInterval都是通过事件循环机制来工作的。setTimeout函数会在指定的延迟时间后将回调函数加入到任务队列中，等待主线程空闲时执行。这意味着，如果主线程上还有其他任务在执行，setTimeout的回调函数会等待这些任务完成后才执行。因此，setTimeout的回调函数会在事件队列中排队等待执行‌12。

			
		

	





	

		

			

				
					
js延迟函数

				
			

			

				

					inyiyi的博客
				

				

					08-06
					
					3039
					
				

			

		

		

			
				
在js中，延迟执行函数有两种： 
settimeout和setinterval，用法如下： 
settimeout(“test()”,”2000”);  //2000毫秒后执行test()函数，只执行一次。 
setinterval(“test()”,”2000”); //每隔2000毫秒执行一次test()函数，执行无数次。 
var interval = window.setinterval(“

			
		

	





	

		

			

				
					
前端核心手写代码面试题详解与实现

				
			

			

				

					
				

			

		

		

			
				
其他拓展知识点还包括营业额数据处理（可能涉及汇总、排序、区间统计）、链式调用（通过返回this实现方法串联）、大小写转换（区分ASCII与Unicode处理）、字符串重复项统计（使用Map计数）以及数组排序优化（如归并...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

  

	
    

      

      

      

        
        

          
          

            

              成就一亿技术人!
            

            

              拼手气红包6.0元
            

          

        

        

          

            还能输入1000个字符
             | 博主筛选后可见
          

          

             
          

          

            

              红包
              添加红包
            

            

              表情包
              插入表情
              

                

              

            

            

              表情包
              代码片
              

                
              

            

            

              
              
              
              
              
              
              
            

          

        

      

    

		

			

			

			

					 条评论被折叠 查看
			

			

				
			

		

	

	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值