JS中SetTimeout和SetInterval使用初探


Posted in Javascript onMarch 23, 2017

一切尽在代码截图中,愿意和大家一起成长!可以喷,毕竟是菜鸟!  好了,废话不多说了,看具体实例代码吧!

<!DOCTYPE html> 
<html lang="en"> 
<head> 
  <meta charset="UTF-8"> 
  <title>Title</title> 
</head> 
<body> 
<div class="wraper"></div> 
<div class="wraper1">abcd123441223432 </div> 
<button onclick="clearIt=window.clearInterval(clearIt)"> 
  Stop</button> 
<script> 
  window.onload = function () { 
    $('.wraper').html('12343242342') 
    setTimeout(function () { 
      $('.wraper').hide(); 
      setTimeout(function () { 
        $('.wraper1')[0].style.backgroundColor = 'red'; 
        console.log(new Date(),"in"); 
      },20000); 
      console.log(new Date(),"out"); 
    },10000); 
  } 
  var clearIt=self.setInterval("setIntervalTest()",1000); 
  function setIntervalTest () { 
    console.log('++++'); 
  } 
</script> 
<script type="text/javascript" src="jquery/jquery-min.js"></script> 
</body> 
</html>

JS中SetTimeout和SetInterval使用初探JS中SetTimeout和SetInterval使用初探JS中SetTimeout和SetInterval使用初探

补充:下面看下setTimeout和setInterval的相同处及区别介绍

setTimeout和setInterval的相同处

setTimeout和setInteval 都是window对象的定时方法,它们语法基本上相同。它们都有两个参数,一个是将要执行的代码字符串,还有一个是以毫秒为单位的时间间隔,当过了那个时间段之后就将执行那段代码。

setTimeout和setInterval的区别

setTimeout方法是定时程序,也就是在什么时间以后干什么。干完了就拉倒。

setInterval方法则是表示间隔一定时间反复执行某操作。

如果用setTimeout实现setInerval的功能,就需要在执行的程序中再定时调用自己才行。

如果要清除定时器则根据创建定时器时使用的方法调用不同的清除方法:

例如:

timer=setTimeout('startShow()',2000);
clearTimeout(timer);

或者:

timer=setInterval('startShow()',2000);
clearInterval(timer);

以上所述是小编给大家介绍的JS中SetTimeout和SetInterval使用初探,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Js(JavaScript)中,弹出是或否的选择框示例(confirm用法的实例分析)
Jul 09 Javascript
jQuery读取和设定KindEditor值的方法
Nov 22 Javascript
Javascript学习笔记之数组的遍历和 length 属性
Nov 23 Javascript
详解javascript高级定时器
Dec 31 Javascript
jQuery插件imgPreviewQs实现上传图片预览
Jan 15 Javascript
Bootstrap创建可折叠的组件
Feb 23 Javascript
jQuery使用EasyUi实现三级联动下拉框效果
Mar 08 Javascript
详解vue2.0 使用动态组件实现 Tab 标签页切换效果(vue-cli)
Aug 30 Javascript
Three.js实现3D机房效果
Dec 30 Javascript
10个最受欢迎的 JavaScript框架(推荐)
Apr 24 Javascript
ztree+ajax实现文件树下载功能
May 18 Javascript
JavaScript声明变量和数据类型的转换
Apr 12 Javascript
深入学习 JavaScript中的函数调用
Mar 23 #Javascript
js中toString()和String()区别详解
Mar 23 #Javascript
jQuery插件Echarts实现的渐变色柱状图
Mar 23 #jQuery
javascript实现圣旨卷轴展开效果(代码分享)
Mar 23 #Javascript
如何给ss bash 写一个 WEB 端查看流量的页面
Mar 23 #Javascript
angularJS深拷贝详解
Mar 23 #Javascript
canvas实现环形进度条效果
Mar 23 #Javascript
You might like
第1次亲密接触PHP5(2)
2006/10/09 PHP
PHP和Mysqlweb应用开发核心技术-第1部分 Php基础-2 php语言介绍
2011/07/03 PHP
PHP调用Linux的命令行执行文件压缩命令
2013/01/27 PHP
PHP随机字符串生成代码(包括大小写字母)
2013/06/24 PHP
PHP把JPEG图片转换成Progressive JPEG的方法
2014/06/30 PHP
setAttribute 与 class冲突解决
2008/02/17 Javascript
JS保存、读取、换行、转Json报错处理方法
2013/06/14 Javascript
jquery插件jquery倒计时插件分享
2013/12/27 Javascript
使用Jquery实现每日签到功能
2015/04/03 Javascript
Node.js配合node-http-proxy解决本地开发ajax跨域问题
2016/08/31 Javascript
JS常用正则表达式总结【经典】
2017/05/12 Javascript
详细介绍RxJS在Angular中的应用
2017/09/23 Javascript
nodejs前端模板引擎swig入门详解
2018/05/15 NodeJs
灵活使用console让js调试更简单的方法步骤
2019/04/23 Javascript
Vue程序调试的方法
2019/06/17 Javascript
JS原型对象操作实例分析
2020/06/06 Javascript
js轮播图之旋转木马效果
2020/10/13 Javascript
python类继承用法实例分析
2014/10/10 Python
Python中的面向对象编程详解(下)
2015/04/13 Python
Window10+Python3.5安装opencv的教程推荐
2018/04/02 Python
Python安装OpenCV的示例代码
2020/03/05 Python
浅谈matplotlib.pyplot与axes的关系
2020/03/06 Python
python判断正负数方式
2020/06/03 Python
Python sorted对list和dict排序
2020/06/09 Python
Python实现冒泡排序算法的完整实例
2020/11/04 Python
分享一枚pycharm激活码适用所有pycharm版本我的pycharm2020.2.3激活成功
2020/11/20 Python
css3中的calc函数浅析
2018/07/10 HTML / CSS
css3.0 图形构成实例练习二
2013/03/19 HTML / CSS
美国领先的家庭健康检测试剂盒提供商:LetsGetChecked
2019/03/18 全球购物
橄榄树药房:OLIVEDA
2019/09/01 全球购物
手机被没收检讨书
2014/02/22 职场文书
国培远程培训感言
2014/03/08 职场文书
政风行风整改方案
2014/10/25 职场文书
浅析InnoDB索引结构
2021/04/05 MySQL
CSS 实现Chrome标签栏的技巧
2021/08/04 HTML / CSS
python中使用redis用法详解
2022/12/24 Redis