jQuery的定时执行和延迟执行

  1. //延迟执行
  2. setTimeout(function(){
  3. console.log("实战授课，100%就业");
  4. },600);
  6. //定时执行
  7. var id = setInterval(function(){
  8. console.log("来武汉长乐教育学PHP");
  9. }, 600)
  11. //注意，以上两个函数中的第一个参数，都可以放在外部，例如
  12. function t(){
  13. console.log("精通PHP开发");
  14. }
  15. setTimeout(t, 600);
  17. //清除定时执行
  18. clearInterval(id);

//下面看案例，还是选项卡的

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=" />
  5. <title></title>
  6. <style>
  7. *{ margin:0; padding:0;}
  8. body { font:12px/19px Arial, Helvetica, sans-serif; color:#666;}
  9. .tab { width:240px;margin:50px;}
  10. .tab_menu { clear:both;}
  11. .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;}
  12. .tab_menu li.hover { background:#DFDFDF;}
  13. .tab_menu li.selected { color:#FFF; background:#6D84B4;}
  14. .tab_box { clear:both; border:1px solid #898989; height:100px;}
  15. .hide{display:none}
  16. </style>
  17. <!-- 引入jQuery -->
  18. <script src="static/js/jquery-2.1.1.min.js" type="text/javascript"></script>
  19. <script type="text/javascript" >
  20. //<![CDATA[
  21. $(function(){
  22. var $div_li =$("div.tab_menu ul li"); //取得jquery对象
  23. var i = 0; //当前的索引数是0
  24. var l = $div_li.length; //一共几页
  26. function t(){
  27. i++; //当前页数自增
  28. if(i==l) { //如果已经到最后一页，恢复到第一页
  29. i = 0;
  30. }
  31. $div_li.eq(i).addClass("selected").siblings().removeClass("selected");
  32. $("div.tab_box > div").eq(i).show().siblings().hide();
  34. }
  35. var id = setInterval(t, 1000);
  39. $div_li.hover(function(){
  40. var $t = $(this);
  41. setTimeout(function(){
  42. $t.addClass("selected").siblings().removeClass("selected");
  43. var index = $t.index(); //取得索引数
  44. $("div.tab_box > div").eq(index).show().siblings().hide();
  45. }, 300);
  46. clearInterval(id); //清除定时器
  47. }, function(){
  48. i = $(this).index(); //当前索引数
  49. id = setInterval(t, 1000);
  50. })
  51. })
  52. //]]>
  53. </script>
  54. </head>
  55. <body>
  57. <div class="tab">
  58. <div class="tab_menu">
  59. <ul>
  60. <li class="selected">时事</li>
  61. <li>体育</li>
  62. <li>娱乐</li>
  63. </ul>
  64. </div>
  65. <div class="tab_box">
  66. <div>时事</div>
  67. <div class="hide">体育</div>
  68. <div class="hide">娱乐</div>
  69. </div>
  70. </div>
  72. </body>
  73. </html>

jQuery的定时执行和延迟执行的更多相关文章

  1. iOS: 零误差或极小误差的定时执行或延迟执行？

    问题如下: 节奏类游戏需要执行很多的跟音乐节拍相关的操作,并且为了保证节奏感,需要让操作跟节拍的关系十分紧密.对两者间隔要求不能超过0.02秒或更低. 目前使用了 GCD 中的 asyncAfter( ...

  2. js获取时间,循环执行任务,延迟执行任务

    一.获取时间 核心方法创建一个时间对象:new Date() 时间对象相关操作 时间对象.函数名 函数名 功能 getYear() 获取四位数的年份 getMonth() 获取2位数的月数, 这个是从 ...

  3. beego任务定时执行，延迟执行

    import ( "github.com/astaxie/beego" "github.com/astaxie/beego/toolbox") cronExpr ...

  4. LINQ 学习路程 -- 查询操作 Deferred Execution of LINQ Query 延迟执行

    延迟执行是指一个表达式的值延迟获取,知道它的值真正用到. 当你用foreach循环时,表达式才真正的执行. 延迟执行有个最重要的好处:它总是给你最新的数据 实现延迟运行 你可以使用yield关键字实现 ...

  5. ScheduledThreadPoolExecutor源码分析-你知道定时线程池是如何实现延迟执行和周期执行的吗？

    Java版本:8u261. 1 简介 ScheduledThreadPoolExecutor即定时线程池,是用来执行延迟任务或周期性任务的.相比于Timer的单线程,定时线程池在遇到任务抛出异常的时候 ...

  6. js中的延迟执行和定时执行

    在js中,延迟执行函数有两种,setTimeout和setInterval,用法如下: function testFunction(){Console.log('hovertree.com');} s ...

  7. JS页面延迟执行一些方法(整理)

    一般在JS页面延迟执行一些方法.可以使用以下的方法 jQuery.delay()方法简介 http://shawphy.com/2010/11/jquery-delay.html jQuery中que ...

  8. 动态绑定AJAX，获取下级分类并延迟执行

    HTML: <div id='allType'> <div class='allTypeHead'><span>所有分类</span></div& ...

  9. ThreadPoolTimer -延迟执行, 周期执行

    介绍重新想象 Windows 8 Store Apps 之 线程池 通过 ThreadPoolTimer 实现延迟执行 通过 ThreadPoolTimer 实现周期执行 通过 ThreadPool ...

随机推荐

  1. [51nod1239] 欧拉函数之和（杜教筛）

    题面 传送门 题解 话说--就一个杜教筛--刚才那道拿过来改几行就行了-- //minamoto #include<bits/stdc++.h> #define R register #d ...

  2. ADX3000二层的负载均衡设计问题

    我的想法是 想在现有的局域网内部,利用ADX划分出一个新的局域网,模拟负载均衡. 现在有三台试验机器,拓扑图如下: 各个机器IP设置如下图: 我进行了如下的操作: 1 在组网配置当中,设置eth1_0 ...

  3. php 过滤重复的数组

    首先数组分为一维数组和多维数组 1.一维数组 $a = array(a,b,c,d,a,b,e,f,g); array_unique($a) 就行了 2.二维数组 $a = array( array( ...

  4. cookie和session的使用和区别

    cookie:存储在浏览器 存值:setcookie("名字",值,过期时间.秒,哪一个文件夹)//文件夹不写一般默认整个网站都可以 setcookie("usernam ...

  5. Leetcode 70. Climbing Stairs 爬楼梯 (递归,记忆化，动态规划)

    题目描述 要爬N阶楼梯,每次你可以走一阶或者两阶,问到N阶有多少种走法 测试样例 Input: 2 Output: 2 Explanation: 到第二阶有2种走法 1. 1 步 + 1 步 2. 2 ...

  6. select和epoll原理和区别

    对于select和poll,其主要原理跟epoll不同 poll和select的共同点就是,对全部指定设备(fd)都做一次poll,当然这往往都是还没有就绪的,那就会通过回调函数把当前进程注册到设备的 ...

  7. flask-SocketIO

    本文来源:https://www.jianshu.com/p/d81397edd2b1 websocket是html5中实现了服务端和客户端进行双向文本或二进制数据通信的一种新协议,其实已经低于HTT ...

  8. js获取复选框内容

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script sr ...

  9. 江西财经大学第一届程序设计竞赛 G

    链接:https://www.nowcoder.com/acm/contest/115/G来源:牛客网 题目描述 周末,小Q喜欢在PU口袋校园上参加各种活动刷绩点,体验丰富多彩的大学生活. 但是每个活 ...

  10. day 012 生成器 与 列表推导式

    生成器的本质就是迭代器,写法和迭代器不一样,用法一样. 获取方法: 1.通过生成器函数 2.通过各种推导式来实现生成器 3.通过数据的转换也可以获取生成器 例如: 更改return 为 yield 即 ...