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 使用技巧精萃(.net html
Apr 25 Javascript
基于jQuery的日期选择控件
Oct 27 Javascript
通过js获取div的background-image属性
Oct 15 Javascript
AngularJS基础知识笔记之表格
May 10 Javascript
详述JavaScript实现继承的几种方式(推荐)
Mar 22 Javascript
js获取当前年月日-YYYYmmDD格式的实现代码
Jun 01 Javascript
微信小程序实现滚动消息通知
Feb 02 Javascript
JS实现获取word文档内容并输出显示到html页面示例
Jun 23 Javascript
vue-cli3 DllPlugin 提取公用库的方法
Apr 24 Javascript
使用Vue实现移动端左滑删除效果附源码
May 16 Javascript
微信小程序开发常见问题及解决方案
Jul 11 Javascript
react基本安装与测试示例
Apr 27 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 内存缓存加速功能memcached安装与用法
2009/09/03 PHP
php实现简单洗牌算法
2013/06/18 PHP
php中用socket模拟http中post或者get提交数据的示例代码
2013/08/08 PHP
php代码审计比较有意思的例子
2014/05/07 PHP
PHP面向对象详解(三)
2015/12/07 PHP
PHP实现的日历功能示例
2018/09/01 PHP
srcElement表格样式
2006/09/03 Javascript
js复制到剪切板的实例方法
2013/06/28 Javascript
使用jquery解析XML示例代码
2014/09/05 Javascript
浅析javascript的间隔调用和延时调用
2014/11/12 Javascript
jQuery实现延迟跳转的方法
2015/06/05 Javascript
基于JS实现textarea中获取动态剩余字数的方法
2016/05/25 Javascript
chrome下判断点击input上标签还是其余标签的实现方法
2016/09/18 Javascript
JS实现页面打印(整体、局部)
2017/08/18 Javascript
关于定制FileField中的上传文件名称问题
2017/08/22 Javascript
Angular使用Md5加密的解决方法
2017/09/16 Javascript
VUE+Element UI实现简单的表格行内编辑效果的示例的代码
2018/10/31 Javascript
微信小程序 弹窗输入组件的实现解析
2019/08/12 Javascript
[04:29]DOTA2亚洲邀请赛小组赛第一日 TOP10精彩集锦
2015/02/01 DOTA
详解windows python3.7安装numpy问题的解决方法
2018/08/13 Python
Python实用工具FuckIt.py介绍
2019/07/02 Python
解决Django Static内容不能加载显示的问题
2019/07/28 Python
Python 如何实现数据库表结构同步
2020/09/29 Python
使用Html5、CSS实现文字阴影效果
2018/01/17 HTML / CSS
Sunglasses Shop荷兰站:英国最大的太阳镜独立在线零售商和供应商
2017/01/08 全球购物
20世纪40年代连衣裙和复古服装:The Seamstress Of Bloomsbury
2018/07/24 全球购物
如何向接受结构参数的函数传入常数值
2016/02/17 面试题
自我鉴定思想方面
2013/10/07 职场文书
售后服务科岗位职责范文
2013/11/13 职场文书
学校七一活动方案
2014/01/19 职场文书
求职自我推荐信
2014/06/25 职场文书
优秀班组事迹材料
2014/12/24 职场文书
银行先进个人总结
2015/02/15 职场文书
工伤认定行政答辩状
2015/05/22 职场文书
学习雷锋主题班会
2015/08/14 职场文书
nginx简单配置多个server的方法
2021/03/31 Servers