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

勇而归 2012-07-13 10:25:31

怎么让下面的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>

...全文
1173 14 打赏 收藏 转发到动态 举报
写回复
用AI写文章
14 条回复
切换为时间正序
请发表友善的回复…
发表回复
勇而归 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
  • 打赏
  • 举报
 回复
<script type="text/javascript">
$(function () {
$("#capslide_img_cont1").capslide({
caption_color : 'black',
caption_bgcolor : '#ECECEC',
overlay_bgcolor : '#ECECEC',
border : '0',
showcaption : true
});
});
</script>

能在这段里面给加上吗？

[Quote=引用 1 楼 的回复:]
setTimeout(function(){
这里写你需要延迟的东西
},3000)
[/Quote]
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延迟加载(setTimeout) JS最后加载
第一 JS延迟加载 代码如下: [removed][removed] [removed] setTimeout(“document.getElementById(‘my’).src=’include/common.php’; “,3000);//延时3秒 [removed] 一般情况下都是利用setTimeout来实现 第二 JS最后加载 在需要插入JS的地方插入以下代码: 代码如下: id=L4EVER>LOADING… 当然，那个LOADING…你可以换成自己喜欢的小图片
JS ES6中setTimeout函数的执行上下文示例
本文介绍的是setTimeout函数，延迟执行函数里的执行上下文，分享给大家供大家参考学习，来看看详细的内容： （1）ES5中，setTimeout里面的函数的执行上下文为全局上下文，举例来说： function log(){ setTimeout(function(){console.log(this.id)},100) } var id=42 log.call({id:21}) //输出的结果为42 我们可以看到setTimeout，被延迟执行的函数，里面的this，指向的是全局作用域，也就是这个函数的上下文为全局上下文。 （2）在ES6的箭头函数中，setTimeout里面，如果执行
sequelazy:添加延迟执行回调以进行续集
#续集 添加查询的延迟执行以通过进行 ＃＃安装 npm install sequelazy ＃＃用法 var sequelazy = require('sequelazy'), // define your sequelize models var models = { Account: require('./account') }; // call function over them sequelazy(models); // now you can execute queries lazily var executeQuery = models.Account.lazy.find({ where: { id: 1} }); // later... executeQuery(function(error, account) { if (error) {
lazyload:只是一个Lazyloader Javascript库
lazyload javascript节点惰性加载执行组件 注意：本组件并非专用于图片的延迟加载，还可以用于普通节点的延迟加载（事件执行）。 有问题欢迎微博交流 如何使用 // 首先在页面中引入lazyload.js /** * @param elem string 节点id * Element 节点对象 * Array | ElementCollection 一组节点的集合引用 * jQuery jquery对象，比如lazyload($('img.lazy')); * @param cfg Object|Function {callback:function(){},container:window,range:0} 如果cfg是一个函数，则默认为回调函数 * 如果cfg是一个object对象，则其中callback为回调函数，c
ncu-sign:自动签出NCU到考勤网站
NCU标志 通过nodejs自动登录/注销到NCU出勤网站。 用法 安装 使用delay_execute.sh或直接与node运行ncu_sign.js。 使用delay_execute.sh 这个shell脚本可以随机设置一个延迟时间（默认为0〜25分钟），然后执行ncu_sign.js。 在ncu_sign文件夹中，运行 $ sh delay_execute.sh Action ID PASSWD ProjectID 或者 $ ./delay_execute.sh Action ID PASSWD ProjectID 使用ncu_sign.js 这种方式可以立即调用登录或注销。 在ncu_sign文件夹中，运行 $ node ncu_sign.js Action ID PASSWD ProjectID 关于执行参数 行动：登录/注销。 ProjectID
JavaScript

87,904

社区成员

224,614

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章