延时操作

最新推荐文章于 2019-03-02 14:36:53 发布

happy_叶子

最新推荐文章于 2019-03-02 14:36:53 发布

阅读量1k

点赞数

分类专栏： js jQuery 文章标签： setTimeout clearTimeout jquery.timer.js everyTime oneTime

本文链接：https://blog.csdn.net/chenhualeguan/article/details/44101611

版权

jQuery 同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

8 篇文章 0 订阅

订阅专栏

js 与 jQuery

参考：http://www.cnblogs.com/guohui/archive/2012/02/24/2366668.html

js:

window.setTimeout():

功能：用于在指定的毫秒数后调用函数或计算表达式。
语法：setTimeout(code,millisec)
参数：
code：在定时时间到时要执行的JavaScript代码串。
millisec：设定的定时时间，用毫秒数表示。
返回值：定时器的ID值，可用于clearTimeout()方法停止指定的定时器。
注：setTimeout()只执行code一次。如果要多次调用，可使用setInterval()或者让code自身再次调用setTimeout()。

window.clearTimeout():

功能：取消由setTimeout()方法设置的定时器。
语法：clearTimeout(id_of_settimeout)
参数：
id_of_settimeout：由setTimeout()返回的ID值。该值标识了一个setTimeout定时器。

JQuery Timers用法

来自JavaEye论坛的JQuery Timers应用知识

jQuery Timers插件地址：
http://plugins.jquery.com/project/timers

提供了三个方法
1. everyTime(时间间隔, [计时器名称], 函式名称, [次数限制], [等待函式程序完成])
2. oneTime(时间间隔, [计时器名称], 呼叫的函式)
3. stopTime ([计时器名称], [函式名称])

//每1秒执行函式test()

function test(){
   //do something...
}
$('body').everyTime('1s',test);

//每1秒执行

$('body').everyTime('1s',function(){
//do something...
});

//每1秒执行，并命名计时器名称为A

$('body').everyTime('1s','A',function(){
//do something...
});

//每20秒执行，最多5次，并命名计时器名称为B

$('body').everyTime('2das','B',function(){
//do something...
},5);

//每20秒执行，无限次，并命名计时器名称为C
//若时间间隔抵到，但函式程序仍未完成则需等待执行函式完成后再继续计时

$('body').everyTime('2das','C',function(){
    //执行一个会超过20秒以上的程式
},0,true);

//倒数10秒后执行

$('body').oneTime('1das',function(){
//do something...
});

//倒数100秒后执行，并命名计时器名称为D

$('body').oneTime('1hs','D',function(){
//do something...
});

//停止所有的在$('body')上计时器

$('body').stopTime ();
//停止$('body')上名称为A的计时器
$('body').stopTime ('A');

//停止$('body')上所有呼叫test()的计时器

$('body').stopTime (test);

自定义时间单位
打开源代码
找到

powers: {
   // Yeah this is major overkill...
   'ms': 1,
   'cs': 10,
   'ds': 100,
   's': 1000,
   'das': 10000,
   'hs': 100000,
   'ks': 1000000
}

可以定制自己想要的单位。

script.js

$(document).ready(function(){

//jQuery:jquery.timer.js
$(".open_b").hover(
function(){
$(this).parent().find(".main_c").stopTime();
$(this).parent().find(".main_c").slideDown("slow",function(){});
},
function(){
$(this).parent().find(".main_c").oneTime(3000,function(){
$(this).parent().find(".main_c").fadeOut("slow");
});
}
);

//js:
var time_act=null;
$(".open_b").hover(
function(){
clearTimeout(time_act);
$(this).parent().find(".main_c").slideDown("slow",function(){});
},
function(){
var obj = $(this);
var hide = function(){
obj.parent().find(".main_c").fadeOut("slow");
};
tag_inttime_act = setTimeout(hide,3000);
}
);

});

style.css

css

.open_b{
margin-top:30px;
width:100px;
line-height:30px;
padding: 0px 20px;
border:1px solid #999;
border-radius:2em 2em 2em 2em;
box-shadow:3px 3px 10px #9edeff;
text-align:center;
}
.main_c{
margin-top:20px;
width:200px;
height:200px;
border-radius:2em 2em 2em 2em;
box-shadow:3px 3px 10px #9edeff;
background:#9edeff;
display:none;
}

index.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>

<script type="text/javascript" src="./jquery213.min.js"></script>
<script type="text/javascript" src="./jquery.timer.js"></script>
<script type="text/javascript" src="./script.js"></script>
<link rel="stylesheet" type="text/css" href="./style.css"/>
</head>
<body>
<div class="m_box">
<div class="open_b">button</div>
<div class="main_c"></div>
</div>
<div class="m_box">
<div class="open_b">button</div>
<div class="main_c"></div>
</div>
</body>
</html>