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 相关文章推荐
重构Javascript代码示例(重构前后对比)
Jan 23 Javascript
javascript自动改变文字大小和颜色的效果的小例子
Aug 02 Javascript
基于jQuery1.9版本如何判断浏览器版本类型
Jan 12 Javascript
Bootstrap导航条可点击和鼠标悬停显示下拉菜单
Nov 25 Javascript
利用js判断手机是否安装某个app的多种方案
Feb 13 Javascript
Vue2.0父组件与子组件之间的事件发射与接收实例代码
Sep 19 Javascript
three.js 入门案例详解
Jan 23 Javascript
微信小程序实现折叠展开效果
Jul 19 Javascript
webpack自动打包和热更新的实现方法
Jun 24 Javascript
Node.js中文件系统fs模块的使用及常用接口
Mar 06 Javascript
JS实现鼠标移动拖尾
Dec 27 Javascript
Ajax实现异步加载数据
Nov 17 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
PHP函数spl_autoload_register()用法和__autoload()介绍
2012/02/04 PHP
php实现的替换敏感字符串类实例
2014/09/22 PHP
php使用正则表达式获取字符串中的URL
2016/12/29 PHP
img的onload的另类用法
2008/01/10 Javascript
JQuery 实现的页面滚动时浮动窗口控件
2009/07/10 Javascript
Chrome中JSON.parse的特殊实现
2011/01/12 Javascript
jquery判断浏览器类型的代码
2012/11/05 Javascript
捕获浏览器关闭、刷新事件不同情况下的处理方法
2013/06/02 Javascript
js单向链表的具体实现实例
2013/06/21 Javascript
js单例模式详解实例
2013/11/21 Javascript
javascript break指定标签打破多层循环示例
2014/01/20 Javascript
实现图片预加载的三大方法及优缺点分析
2014/11/19 Javascript
JavaScript跨浏览器获取页面中相同class节点的方法
2015/03/03 Javascript
js实现兼容IE、Firefox的图片缩放代码
2015/12/08 Javascript
Bootstrap3学习笔记(三)之表格
2016/05/20 Javascript
微信小程序 progress组件详解及实例代码
2016/10/25 Javascript
微信小程序 数组(增,删,改,查)等操作实例详解
2017/01/05 Javascript
微信扫码支付零云插件版实例详解
2017/04/26 Javascript
Node实战之不同环境下配置文件使用教程
2018/01/02 Javascript
详解Typescript里的This的使用方法
2021/01/08 Javascript
vscode自定义vue模板的实现
2021/01/27 Vue.js
[01:27:30]LGD vs Newbee 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/19 DOTA
Python模块学习 filecmp 文件比较
2012/08/27 Python
搞笑的程序猿:看看你是哪种Python程序员
2015/06/12 Python
Python的SQLalchemy模块连接与操作MySQL的基础示例
2016/07/11 Python
Python 将json序列化后的字符串转换成字典(推荐)
2020/01/06 Python
优秀护士获奖感言
2014/02/20 职场文书
企业安全生产演讲稿
2014/05/09 职场文书
门店业绩提升方案
2014/06/08 职场文书
小学生美德少年事迹材料
2014/08/24 职场文书
财产分割协议书范本
2014/11/03 职场文书
在职人员跳槽求职信
2015/03/20 职场文书
降价通知函
2015/04/23 职场文书
学校财务管理制度
2015/08/04 职场文书
Pytest allure 命令行参数的使用
2021/04/18 Python
PyQt5结合QtDesigner实现文本框读写操作
2021/06/11 Python