如何让JS的ID延迟3秒后再执行？

2012-07-13 10:25:31 1.3k 阅读 AI 写同款 · GEO 优化AI 选题数据监测一键分发 ›

JavaScript延迟加载 JavaScript延迟加载技术通过不同类型的脚本加载方式优化网页性能。主要方法包括：1) 普通脚本，默认阻塞HTML解析；2) defer脚本，不阻塞HTML解析，按顺序在DOMContentLoaded事件前执行；3) async脚本，加载完成后立即执行，不保证顺序；4) 动态脚本，按需加载；5) ES模块，支持模块化加载。实际应用中，应根据脚本的重要性和依赖关系选择合适的加载方式，如关键脚本使用defer，独立功能使用async，以提高页面加载速度和用户体验。阅读详情

怎么让下面的ID：capslide_img_ cont1，capslide_img_ cont2......，延迟3秒后再执行？下面的JS代码，希望有热心网友回答。。。因为急用。。。

总共就6个ID，我想让这6个ID延迟3秒后执行；
这是一个鼠标放上去的效果，因为鼠标一路过，就会有闪动，所以想让它延迟，这样就不会太花哨了。。。

<div id="capslide_img_ cont1">
<img src="css/5b3420e74e8875f7b75c35cdd8a16c57.jpg" border="0"/>
</div>
<div id="capslide_img_ cont2">
<img src="css/5b3420e74e8875f7b75c35cdd8a16c57.jpg" border="0"/>
</div>

<script type="text/javascript">
$(function() {
$("#capslide_img_cont1").capslide({
caption_color : 'black',
caption_bgcolor : '#ECECEC',
overlay_bgcolor : '#ECECEC',
border : '0',
showcaption : true
});
$("#capslide_img_cont2").capslide({
caption_color : 'black',
caption_bgcolor : '#ECECEC',
overlay_bgcolor : '#ECECEC',
border : '0',
showcaption : true
});
$("#capslide_img_cont3").capslide({
caption_color : 'black',
caption_bgcolor : '#ECECEC',
overlay_bgcolor : '#ECECEC',
border : '0',
showcaption : true
});
$("#capslide_img_cont4").capslide({
caption_color : 'black',
caption_bgcolor : '#ECECEC',
overlay_bgcolor : '#ECECEC',
border : '0',
showcaption : true
});
$("#capslide_img_cont5").capslide({
caption_color : 'black',
caption_bgcolor : '#ECECEC',
overlay_bgcolor : '#ECECEC',
border : '0',
showcaption : true
});
$("#capslide_img_cont6").capslide({
caption_color : 'black',
caption_bgcolor : '#ECECEC',
overlay_bgcolor : '#ECECEC',
border : '0',
showcaption : true
});
});
</script>

...全文

STM32F407+LAN8720网口不通？别慌，手把手教你用CubeMX和HAL库搞定RMII配置与调试本文详细介绍了STM32F407与LAN8720网口不通的全面排查与解决方法，涵盖硬件检查、CubeMX配置、PHY芯片初始化和LWIP协议栈优化。通过RMII接口配置、时钟树设置和PHY芯片调试，帮助开发者快速定位并解决网络连接问题，提升嵌入式网络开发效率。阅读详情

勇而归

JavaScript 87,984 成员 224,681 内容

+ 关注 + 加入社区

切换为时间正序

勇而归 2012-07-14

打赏
举报

感谢你，给你结帖子了，给你各加了40分，再就是去你的站ok22.org给你各点了两下百度AD，没有多点哦，以后有建站的活，我就找你做，谢谢了

[Quote=引用 13 楼的回复:]
改了下js

JScript code

function Pause(obj,iMinSecond){
if (window.eventList==null) window.eventList=new Array();
var ind=-1;
for (var i=0;i<window.eventList.length;i++){ ……
[/Quote]

勇而归 2012-07-13

打赏
举报

附上链接了：http://www.mpvvip.com/dins/le.html 就是像让鼠标路过时，不要谎动，放鼠标放上3秒后，才往上滑。。。

[Quote=引用 2 楼的回复:]
javascript模拟sleep
http://www.ok22.org/art_detail.aspx?id=281
使用方法比较简单。

JScript code

function testJsStop(){
alert("1");
Pause(this,2000);//2秒钟扣执行nextstep事件。。这样就可以设置下一个方法执行的开始时间
……
[/Quote]

勇而归 2012-07-13

打赏
举报

附上链接了：http://www.mpvvip.com/dins/le.html 就是像让鼠标路过时，不要谎动，放鼠标放上3秒后，才往上滑。。。

[Quote=引用 8 楼的回复:]
你这是jquery封装的函数啊，可以直接使用jq的delay函数啊。

$("#capslide_img_cont1").delay(3000).capslide({
caption_color : 'black',
caption_bgcolor : '#ECECEC',
overlay_bgcolor : '#ECECEC',
border : '0',
sh……
[/Quote]

chenyang37 2012-07-13

打赏
举报

你这是jquery封装的函数啊，可以直接使用jq的delay函数啊。

$("#capslide_img_cont1").delay(3000).capslide({
caption_color : 'black',
caption_bgcolor : '#ECECEC',
overlay_bgcolor : '#ECECEC',
border : '0',
showcaption : true
});

勇而归 2012-07-13

打赏
举报

可以这样写吗？

<script type="text/javascript">
setTimeout $(function () {
$("#capslide_img_cont1").capslide({
caption_color : 'black',
caption_bgcolor : '#ECECEC',
overlay_bgcolor : '#ECECEC',
border : '0',
showcaption : true
});
},3000);
</script>

勇而归 2012-07-13

打赏
举报

试了，行不通，JS代码就无效了，和他$有关系吗

[Quote=引用 5 楼的回复:]
引用 1 楼的回复:
setTimeout(function(){
这里写你需要延迟的东西
},3000)

这个就行
[/Quote]

gf05011 2012-07-13

打赏
举报

[Quote=引用 1 楼的回复:]
setTimeout(function(){
这里写你需要延迟的东西
},3000)
[/Quote]

这个就行

勇而归 2012-07-13

打赏
举报

能在这段里面给加上吗？本人新手，。。。

<script type="text/javascript">
$(function () {
$("#capslide_img_cont1").capslide({
caption_color : 'black',
caption_bgcolor : '#ECECEC',
overlay_bgcolor : '#ECECEC',
border : '0',
showcaption : true
});
});
</script>

[Quote=引用 2 楼的回复:]
javascript模拟sleep
http://www.ok22.org/art_detail.aspx?id=281
使用方法比较简单。

JScript code

function testJsStop(){
alert("1");
Pause(this,2000);//2秒钟扣执行nextstep事件。。这样就可以设置下一个方法执行的开始时间
……
[/Quote]

勇而归 2012-07-13

打赏
举报

86y 2012-07-13

打赏
举报

javascript模拟sleep
http://www.ok22.org/art_detail.aspx?id=281
使用方法比较简单。



function testJsStop(){    

 alert("1");    

 Pause(this,2000);//2秒钟扣执行nextstep事件。。这样就可以设置下一个方法执行的开始时间  

 this.NextStep=function(){     

  alert("2");    

 }  

}    

testJsStop();

chenyang37 2012-07-13

打赏
举报

setTimeout(function(){
这里写你需要延迟的东西
},3000)

86y 2012-07-13

打赏
举报

改了下js



function Pause(obj,iMinSecond){     

   if (window.eventList==null) window.eventList=new Array();     

   var ind=-1;     

   for (var i=0;i<window.eventList.length;i++){     

       if (window.eventList[i]==null) {     

         window.eventList[i]=obj;     

         iind=i;     

         break;     

        }     

    }     

   if (ind==-1){     

   ind=window.eventList.length;     

   window.eventList[ind]=obj;     

   }     

  setTimeout("GoOn(" + ind + ")",iMinSecond);     

}     

    

//js继续函数    

function GoOn(ind){     

  var obj=window.eventList[ind];     

  window.eventList[ind]=null;     

  if (obj.NextStep) obj.NextStep();     

  else obj();     

}



(function($) {

	$.fn.capslide = function(options) {

		var opts = $.extend({}, $.fn.capslide.defaults, options);

		return this.each(function() {

			$this = $(this);

			var o = $.meta ? $.extend({}, opts, $this.data()) : opts;

			

			if(!o.showcaption)	$this.find('.ic_caption').css('display','none');

			else $this.find('.ic_text').css('display','none');

				

			var _img = $this.find('img:first');

			var w = _img.css('width');

			var h = _img.css('height');

			$('.ic_caption',$this).css({'color':o.caption_color,'background-color':o.caption_bgcolor,'bottom':'0px','width':w});

			$('.overlay',$this).css('background-color',o.overlay_bgcolor);

			$this.css({'width':w , 'height':h, 'border':o.border});

			$this.hover(

				function () {

					Pause(this,3000);//停留3秒后执行NextStep的function

					this.NextStep=function(){

						if((navigator.appVersion).indexOf('MSIE 7.0') > 0)

						$('.overlay',$(this)).show();

						else

						$('.overlay',$(this)).fadeIn();

						if(!o.showcaption)

							$(this).find('.ic_caption').slideDown(500);

						else

							$('.ic_text',$(this)).slideDown(500);

					}

				},

				function () {

					Pause(this,1000);//停留3秒后执行NextStep的function

					this.NextStep=function(){

						if((navigator.appVersion).indexOf('MSIE 7.0') > 0)

						$('.overlay',$(this)).hide();

						else

						$('.overlay',$(this)).fadeOut();

						if(!o.showcaption)

							$(this).find('.ic_caption').slideUp(200);

						else

							$('.ic_text',$(this)).slideUp(200);

					}					

				}

			);

		});

	};

	$.fn.capslide.defaults = {

		caption_color	: 'black',

		caption_bgcolor	: '#ECECEC',

		overlay_bgcolor : '#ECECEC',

		border			: '0',

		showcaption	    : true

	};

})(jQuery);











$(function () {

	$("#capslide_img_cont1").capslide({

		caption_color	: 'black',

		caption_bgcolor	: '#ECECEC',

		overlay_bgcolor : '#ECECEC',

		border			: '0',

		showcaption	    : true

	});

	$("#capslide_img_cont2").capslide({

		caption_color	: 'black',

		caption_bgcolor	: '#ECECEC',

		overlay_bgcolor : '#ECECEC',

		border			: '0',

		showcaption	    : true

	});

});

86y 2012-07-13

打赏
举报

路径你自己改吧！

86y 2012-07-13

打赏
举报

楼主只能说你不去仔细看我发给你的东西了。。已经解决了看看是不是你要的效果!



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"><head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Home</title>

<link href="le_files/style.css" type="text/css" rel="stylesheet">

 </head>

<body>

<div class="demo">

	<div style="width: 210px; height: 170px; border: 0px none;" id="capslide_img_cont1" class="ic_container">

		<img src="le_files/baidu_sylogo1.gif" height="170" width="210" border="0">

		<div class="overlay" style="background-color: rgb(236, 236, 236); display: none;"></div>

		<div style="color: black; background-color: rgb(236, 236, 236); bottom: 0px; width: 210px;" class="ic_caption">

			<p class="ic_category"> </p>

			<h3>服务员的快乐</h3>

			<p style="display: none;" class="ic_text">使用本系统服务员所得到的方便<br><img src="le_files/aan.gif" border="0">

			</p>

		</div>

	</div>

</div>







<div class="demo">

	<div style="width: 210px; height: 170px; border: 0px none;" id="capslide_img_cont2" class="ic_container">

		<img src="le_files/2_hksdn.gif" height="170" width="210" border="0">

		<div class="overlay" style="background-color: rgb(236, 236, 236); display: block; opacity: 0.969096;"></div>

		<div style="color: black; background-color: rgb(236, 236, 236); bottom: 0px; width: 210px;" class="ic_caption">

			<p class="ic_category"> </p>

			<h3>服务员的快乐</h3>

			<p style="display: block; overflow: hidden; height: 34.525px; margin-top: 0px; margin-bottom: 0px; padding-top: 4.45108px; padding-bottom: 4.45108px;" class="ic_text">使用本系统服务员所得到的方便<br><img src="le_files/aan.gif" border="0">

			</p>

		</div>

	</div>

</div>

 





<script type="text/javascript" src="le_files/jquery-1.js"></script> 

<script type="text/javascript">

function Pause(obj,iMinSecond){     

   if (window.eventList==null) window.eventList=new Array();     

   var ind=-1;     

   for (var i=0;i<window.eventList.length;i++){     

       if (window.eventList[i]==null) {     

         window.eventList[i]=obj;     

         iind=i;     

         break;     

        }     

    }     

   if (ind==-1){     

   ind=window.eventList.length;     

   window.eventList[ind]=obj;     

   }     

  setTimeout("GoOn(" + ind + ")",iMinSecond);     

}     

    

//js继续函数    

function GoOn(ind){     

  var obj=window.eventList[ind];     

  window.eventList[ind]=null;     

  if (obj.NextStep) obj.NextStep();     

  else obj();     

}



(function($) {

	$.fn.capslide = function(options) {

		var opts = $.extend({}, $.fn.capslide.defaults, options);

		return this.each(function() {

			$this = $(this);

			var o = $.meta ? $.extend({}, opts, $this.data()) : opts;

			

			if(!o.showcaption)	$this.find('.ic_caption').css('display','none');

			else $this.find('.ic_text').css('display','none');

				

			var _img = $this.find('img:first');

			var w = _img.css('width');

			var h = _img.css('height');

			$('.ic_caption',$this).css({'color':o.caption_color,'background-color':o.caption_bgcolor,'bottom':'0px','width':w});

			$('.overlay',$this).css('background-color',o.overlay_bgcolor);

			$this.css({'width':w , 'height':h, 'border':o.border});

			$this.hover(

				function () {

					Pause(this,3000);//停留3秒后执行NextStep的function

					this.NextStep=function(){

						if((navigator.appVersion).indexOf('MSIE 7.0') > 0)

						$('.overlay',$(this)).show();

						else

						$('.overlay',$(this)).fadeIn();

						if(!o.showcaption)

							$(this).find('.ic_caption').slideDown(500);

						else

							$('.ic_text',$(this)).slideDown(500);

					}

				},

				function () {

					if((navigator.appVersion).indexOf('MSIE 7.0') > 0)

					$('.overlay',$(this)).hide();

					else

					$('.overlay',$(this)).fadeOut();

					if(!o.showcaption)

						$(this).find('.ic_caption').slideUp(200);

					else

						$('.ic_text',$(this)).slideUp(200);

				}

			);

		});

	};

	$.fn.capslide.defaults = {

		caption_color	: 'black',

		caption_bgcolor	: '#ECECEC',

		overlay_bgcolor : '#ECECEC',

		border			: '0',

		showcaption	    : true

	};

})(jQuery);











            $(function () {

                $("#capslide_img_cont1").capslide({

                    caption_color	: 'black',

                    caption_bgcolor	: '#ECECEC',

                    overlay_bgcolor : '#ECECEC',

                    border			: '0',

                    showcaption	    : true

                });

                $("#capslide_img_cont2").capslide({

                    caption_color	: 'black',

                    caption_bgcolor	: '#ECECEC',

                    overlay_bgcolor : '#ECECEC',

                    border			: '0',

                    showcaption	    : true

                });

            });		

			

</script>

</body></html>

如何让JS的ID延迟3秒后再执行？

相关推荐