JS中SetTimeout和SetInterval使用初探

 更新时间:2017年03月23日 10:07:46   作者:净心净意  
这篇文章主要介绍了JS中SetTimeout和SetInterval使用初探,需要的朋友可以参考下

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

<!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> 

补充:下面看下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使用初探,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

相关文章

  • Echarts折线图实现一条折线显示不同颜色的方法

    Echarts折线图实现一条折线显示不同颜色的方法

    这篇文章主要给大家介绍了关于Echarts折线图实现一条折线显示不同颜色的相关资料,Echarts的折线图可以通过设置series中的itemStyle属性来改变折线的颜色,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2024-02-02
  • 清除网页历史记录,屏蔽后退按钮!

    清除网页历史记录,屏蔽后退按钮!

    浏览器的后退按钮使得我们能够方便地返回以前访问过的页面,它无疑非常有用。但有时候我们不得不关闭这个功能,以 防止用户打乱预定的页面访问次序。
    2008-12-12
  • js导出txt示例代码

    js导出txt示例代码

    很多新手朋友们都不知道js怎么导出txt,下面有个不错的示例,大家可以参考下
    2014-01-01
  • javaScript中json字符串操作详细例子

    javaScript中json字符串操作详细例子

    JSON(JavaScript Object Notation)是JavaScript编程语言的一个子集,正因JSON是JavaScript的一个子集,所以它可清晰的运用于此语言中,这篇文章主要给大家介绍了关于javaScript中json字符串操作的相关资料,需要的朋友可以参考下
    2023-11-11
  • JS实现简单加减购物车效果

    JS实现简单加减购物车效果

    这篇文章主要为大家详细介绍了JS实现简单加减购物车效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-08-08
  • 用JS判断IE版本的代码 超管用!

    用JS判断IE版本的代码 超管用!

    用JS判断IE版本的代码 超管用!,需要的朋友可以参考下。
    2011-08-08
  • JavaScript实现的简单幂函数实例

    JavaScript实现的简单幂函数实例

    这篇文章主要介绍了JavaScript实现的简单幂函数,实例分析了javascript实现幂运算的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-04-04
  • ES6 中可以提升幸福度的小功能

    ES6 中可以提升幸福度的小功能

    这篇文章主要介绍了ES6 中可以提升幸福度的小功能,在量解构赋值的用途,函数的用处等方面给大家介绍,需要的朋友可以参考下
    2018-08-08
  • 使用JavaScript switch case 另类写法

    使用JavaScript switch case 另类写法

    在JavaScript里,函数(todoA、todoB、todoC)就是对象,“()”的作用就是就是执行函数对象,二者简单地组合一下就能够让代码清晰简洁很多了,何乐不为呢?
    2010-03-03
  • 15 个 JavaScript Web UI 库

    15 个 JavaScript Web UI 库

    本文介绍了 15 个非常强大的 JavaScript Web UI 库,非常适合各种各种规模的富 Web 应用的开发。
    2010-05-05

最新评论