jQuery的定时执行和延迟执行
jQuery的定时执行和延迟执行
//延迟执行
setTimeout(function(){
console.log("实战授课,100%就业");
},600);
//定时执行
var id = setInterval(function(){
console.log("来武汉长乐教育学PHP");
}, 600)
//注意,以上两个函数中的第一个参数,都可以放在外部,例如
function t(){
console.log("精通PHP开发");
}
setTimeout(t, 600);
//清除定时执行
clearInterval(id);
//下面看案例,还是选项卡的
<!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=" />
<title></title>
<style>
*{ margin:0; padding:0;}
body { font:12px/19px Arial, Helvetica, sans-serif; color:#666;}
.tab { width:240px;margin:50px;}
.tab_menu { clear:both;}
.tab_menu li { float:left; text-align:center; cursor:pointer; list-style:none; padding:1px 6px; margin-right:4px; background:#F1F1F1; border:1px solid #898989; border-bottom:none;}
.tab_menu li.hover { background:#DFDFDF;}
.tab_menu li.selected { color:#FFF; background:#6D84B4;}
.tab_box { clear:both; border:1px solid #898989; height:100px;}
.hide{display:none}
</style>
<!-- 引入jQuery -->
<script src="static/js/jquery-2.1.1.min.js" type="text/javascript"></script>
<script type="text/javascript" >
//<![CDATA[
$(function(){
var $div_li =$("div.tab_menu ul li"); //取得jquery对象
var i = 0; //当前的索引数是0
var l = $div_li.length; //一共几页
function t(){
i++; //当前页数自增
if(i==l) { //如果已经到最后一页,恢复到第一页
i = 0;
}
$div_li.eq(i).addClass("selected").siblings().removeClass("selected");
$("div.tab_box > div").eq(i).show().siblings().hide();
}
var id = setInterval(t, 1000);
$div_li.hover(function(){
var $t = $(this);
setTimeout(function(){
$t.addClass("selected").siblings().removeClass("selected");
var index = $t.index(); //取得索引数
$("div.tab_box > div").eq(index).show().siblings().hide();
}, 300);
clearInterval(id); //清除定时器
}, function(){
i = $(this).index(); //当前索引数
id = setInterval(t, 1000);
})
})
//]]>
</script>
</head>
<body>
<div class="tab">
<div class="tab_menu">
<ul>
<li class="selected">时事</li>
<li>体育</li>
<li>娱乐</li>
</ul>
</div>
<div class="tab_box">
<div>时事</div>
<div class="hide">体育</div>
<div class="hide">娱乐</div>
</div>
</div>
</body>
</html>
jQuery的定时执行和延迟执行的更多相关文章
- iOS: 零误差或极小误差的定时执行或延迟执行?
问题如下: 节奏类游戏需要执行很多的跟音乐节拍相关的操作,并且为了保证节奏感,需要让操作跟节拍的关系十分紧密.对两者间隔要求不能超过0.02秒或更低. 目前使用了 GCD 中的 asyncAfter( ...
- js获取时间,循环执行任务,延迟执行任务
一.获取时间 核心方法创建一个时间对象:new Date() 时间对象相关操作 时间对象.函数名 函数名 功能 getYear() 获取四位数的年份 getMonth() 获取2位数的月数, 这个是从 ...
- beego任务定时执行,延迟执行
import ( "github.com/astaxie/beego" "github.com/astaxie/beego/toolbox") cronExpr ...
- LINQ 学习路程 -- 查询操作 Deferred Execution of LINQ Query 延迟执行
延迟执行是指一个表达式的值延迟获取,知道它的值真正用到. 当你用foreach循环时,表达式才真正的执行. 延迟执行有个最重要的好处:它总是给你最新的数据 实现延迟运行 你可以使用yield关键字实现 ...
- ScheduledThreadPoolExecutor源码分析-你知道定时线程池是如何实现延迟执行和周期执行的吗?
Java版本:8u261. 1 简介 ScheduledThreadPoolExecutor即定时线程池,是用来执行延迟任务或周期性任务的.相比于Timer的单线程,定时线程池在遇到任务抛出异常的时候 ...
- js中的延迟执行和定时执行
在js中,延迟执行函数有两种,setTimeout和setInterval,用法如下: function testFunction(){Console.log('hovertree.com');} s ...
- JS页面延迟执行一些方法(整理)
一般在JS页面延迟执行一些方法.可以使用以下的方法 jQuery.delay()方法简介 http://shawphy.com/2010/11/jquery-delay.html jQuery中que ...
- 动态绑定AJAX,获取下级分类并延迟执行
HTML: <div id='allType'> <div class='allTypeHead'><span>所有分类</span></div& ...
- ThreadPoolTimer -延迟执行, 周期执行
介绍重新想象 Windows 8 Store Apps 之 线程池 通过 ThreadPoolTimer 实现延迟执行 通过 ThreadPoolTimer 实现周期执行 通过 ThreadPool ...
随机推荐
- 前端性能优化-gzip
为什么要开启GZIP 我们需要下载一个100KB的Javascript文件,正常的下载量就是100KB,如果我们把文件在服务端压缩一下,压缩成30kb,下载到客户端再进行解压,这样就减少了大量的HTT ...
- CI框架源码学习笔记3——Log.php
上一节说完了Common.php,然而跟代码打交道总是免不了日志记录,所以这一节我们说说Log.php文件. 先看看类里面的几个属性, protected $_log_path; 日志路径 prot ...
- CF1005F Berland and the Shortest Paths
\(\color{#0066ff}{ 题目描述 }\) 一个无向图(边权为1),输出一下选边的方案使\(\sum d_i\)最小(\(d_i\)为从1到i的最短路) 输出一个方案数和方案(方案数超过k ...
- Reincarnation HDU - 4622
\(\color{#0066ff}{ 题目描述 }\) 给定一个字符串,多次询问某一字串的f值 f(s)代表s的不同字串数量 \(\color{#0066ff}{输入格式}\) 第一行T,代表数据组数 ...
- Web安全工程师(进阶)课程表
01-SQL注入漏洞原理与利用 预备知识: 了解HTTP协议,了解常见的数据库.脚本语言.中间件.具备基本的编程语言基础. 授课大纲: 第一章:SQL注入基础 1.1 Web应用架构分析1.2 SQL ...
- 以Tkinter模块来学习Python实现GUI(图形用户界面)编程
tk是什么:它是一个图形库,支持多个操作系统,使用tcl语言开发的.tkinter是Python内置的模块, 与tk类似的第三方图形库(GUI库)还有很多,比如:Qt,GTK,wxWidget,wxP ...
- 使用npm发布自己的包
记录一下大概步骤: 去npm官网注册一个账号 在文件夹下执行npm init 创建 package.json 执行 npm login,并根据提示输入你的npm账号,密码,和邮箱 执行 npm pub ...
- 利用RELK进行日志收集
利用RELK进行日志收集 发布时间:April 3, 2018 // 分类:运维工作,开发笔记,python // No Comments 前不久在做应急的总是遇到要求对日志进行分析溯源,当时就想到如 ...
- ubuntu14.04&matlab2015b 测试caffe的Matlab接口
Step1: 修改caffe-master中的Makefile.config 提示:可以到文件中直接“ctrl+f”,键入相应大写字母即可查找到相应位置. Step2:编译接口.如果之前编译caffe ...
- poj 1001 字符串乘法以及处理精度问题
#include<iostream> #include<cstring> using namespace std; int main() { string r; int n,d ...