JavaScriptBOM_定时器(二十二)

目录:

1.什么是定时器

2.setInterval、clearInterval、setTimeout的使用

一、什么是定时器

JavaScript 是单线程语言,但它允许通过设置超时值和间歇时间值来调度代码在特定的时刻执行。

二、setInterval、clearInterval、setTimeout的使用

1.setInterval

setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式。 setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作

语法:

setInterval(function, milliseconds)

code/function必需。要调用一个代码串,也可以是一个函数。

milliseconds必须。周期性执行或调用 code/function 之间的时间间隔,以毫秒计。

代码:每隔1000毫秒执行console.log(1)

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>

<script type="text/javascript">
setInterval(function(){
    console.log(1)
},1000)
</script>

</body>
</html>

2.setTimeout

setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。

语法:

setTimeout(function, milliseconds)

代码:延迟执行,打开页面隔1000毫秒执行console.log(1)

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>

<script type="text/javascript">
setTimeout(function(){
    console.log(1)
},1000)
</script>

</body>
</html>

这里可以看出来setInterval和setTimeout的区别了,setInterval是一直打印,setTimeout只是执行了一次

3.clearInterval

clearInterval() 方法可取消由 setInterval() 设置的 timeout。 clearInterval() 方法的参数必须是由 setInterval() 返回的 ID 值。

语法:

clearInterval(id_of_setinterval):id_of_setinterval 由 setInterval() 返回的 ID 值。

代码:面这个例子将每隔 50 毫秒调用 clock() 函数。您也可以使用一个按钮来停止这个 clock:

<html>
<body>

<input type="text" id="clock" size="35" />
<script language=javascript>
var int=self.setInterval("clock()",50)
function clock()
  {
  var t=new Date()
  document.getElementById("clock").value=t
  }
</script>
</form>
<button onclick="int=window.clearInterval(int)">
Stop interval</button>

</body>
</html>

下节预告:数组_创建数组_一维数组_length

原文链接:segmentfault.com

上一篇:使用laravel快速构建vuepress管理器
下一篇:【解决】nodejs 使用 mysql 获取数据库数据中文乱码问题

相关推荐

  • 通过定时器、时间分片、Web Worker优化长任务

    提示 希望你能了解什么是 Event Loop(事件循环),以及对 Web Worker 有所了解,以便更容易吸收 什么是长任务 W3C 性能组规定:执行时长大于 50ms 的任务,定义为长任务 ...

    9 个月前
  • 转行学前端的第 56 天 : 了解 BOM window 定时器

    我是小又又,住在武汉,做了两年新媒体,准备用 6 个月时间转行前端。 今日学习目标 昨天主要基于搜索基础学习 BOM window 对象控制窗体移动和大小变化 ,今天主要开始基于搜索基础学习单线...

    4 个月前
  • 谈谈我对js中定时器的一点理解

    撸了今年阿里、头条和美团的面试,我有一个重要发现....... javascript定时器工作原理是一个重要的基础知识点。因为定时器在单线程中工作,它们表现出的行为很直观。

    1 年前
  • 浅谈Node.js中的定时器

    Node.js中定时器的实现 上一篇博文提到,在Node中timer并不是通过新开线程来实现的,而是直接在event loop中完成。下面通过几个JavaScript的定时器示例以及Node相关源码来...

    4 年前
  • 有创建一个JavaScript定时器比setTimeout的更准确的方法吗?

    Dan Herbert提出了一个问题:Is there a more accurate way to create a Javascript timer than setTimeout?,或许与您遇到...

    3 年前
  • 小程序实战(十一)-验证码定时器

    一、需求说明 点击 获取验证码 后,按钮不可点击,并出现 xx 秒后重新获取 从 60 秒开始计时 二、需求实现 2.1 HTML 代码 &lt;button bindtap="getCode...

    4 个月前
  • 定时器中的 this

    前言 this指向问题一直是一个让新手很困扰的问题,这篇文章着重讲含有定时器时this的指向问题。 关于不包含定时器的this指向,这篇文章讲的很清楚,看完之后相信能使小白茅塞顿开超级传送门。

    4 个月前
  • 定时器不准时☞带你揭秘setTimeout和setInterval

    一、一个面试题引起的思考 某天上班摸鱼,一个Q群里有人在发笔试题在线求助。大概瞄了一下。发现里面有道主观判断题。 代码中有setInterval(()=&gt;{console.log('a')},...

    9 个月前
  • 定时器setTime和setInterval

    setTimeout() 用法 参数: setTimeout(fn,100,1,2)。第一个和第二是参数固定的,第一个是回调函数,第二个是延迟时间,后面的都是回调函数的参数。

    1 年前
  • 如何让setinterval定时器里面的函数先触发一次再正常延时执行

    需求背景 最近经常遇到这样的问题:需要间隔多少秒获取一次数据。实际中,往往采用setInterval来实现,但是当参数传递不当时,会出现先延迟了一段时间后再执行获取的数据的函数。

    1 年前

官方社区

扫码加入 JavaScript 社区