JS 定时器 setTimeout 与 setInterval 的区别和用法

最新推荐文章于 2022-08-27 14:39:14 发布
最新推荐文章于 2022-08-27 14:39:14 发布
阅读量107 收藏
点赞数
分类专栏： 前端 文章标签： javascript 定时器
原文链接：https://www.mk2048.com/blog/blog.php?id=h1b1ih0iabjb&title=JS+%E5%AE%9A%E6%97%B6%E5%99%A8+setTimeout+%E4%B8%8E+setInterval+%E7%9A%84%E5%8C%BA%E5%88%AB%E5%92%8C%E7%94%A8%E6%B3%95
版权


定时器：

window.setTimeout(function(){},间隔时间毫秒); 

                           -- 定时炸弹，延迟执行，只执行一次

window.setInterval(function(){},间隔的时间毫秒);
                                                              

                           -- 无限循环，每一次循环有间隔时间，一般不要小于20毫秒
                           -- 它是有返回值的，可以用一个变量来接收这个定时器对象

window.clearInterval(要关闭的定时器对象);

                            -- 一旦执行这句代码，会立刻停止此定时器对象的执行

offset

                 -- 当前即时的对象的高度、宽带、位置，

                 -- 直接到浏览器上去找

对象.offsetWidth      -- 当前的宽带

对象.offsetHeight     -- 当前的高度

对象.offsetLeft         --当前距离左侧位置

对象.offsetTop          --当前距离上方位置

对象.offsetParent     -- 当前起点位置 

 

对象.style.样式

                 -- -- Js 只能获取到内联的样式，无法获取 CSS表中的样式

 

例题 1

    点击按钮，按钮本身的长度发生变化，并且位置移动

<html >
<head>
    <title></title>

    <style type="text/css">
        #a {
            position:absolute;
        }
    </style>

</head>
<body>
   
      <input type="button" value="按钮" id="a" />

</body>
</html>

<script type="text/javascript">

    var v = document.getElementById('a')

    v.onclick = function () {

        v.style.width = v.offsetWidth   100   "px";     --长度改变

        v.style.left = v.offsetLeft   100   "px";            -- 位置移动

    }


</script>
View Code

        -- 位置发生改变时必须要有定位

 

例题2

     点击按钮，按钮本身的长度、位置持续变化

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

    <style type="text/css">
        #a {
            position:absolute;
        }
    </style>

</head>
<body>

    <input type="button" value="按钮" id="a" />

</body>
</html>

<script type="text/javascript">

    var v = document.getElementById('a')

    v.onclick = function () {
        window.setInterval(function () {
             v.style.width = v.offsetWidth   10   "px";
             v.style.left = v.offsetLeft   10   "px";
        }, 20)      
    }

</script>
View Code

 

 -- 想让按钮向左跑，变为  -10就可以，上下同理

 

例3

   在例2的基础上让定时器停下

<html >
<head>
    <title></title>

    <style type="text/css">
        #a {
            position:absolute;
        }
    </style>

</head>
<body>

    <input type="button" value="按钮" id="a" />

</body>
</html>

   <script type="text/javascript">

    var v = document.getElementById('a')

       v.onclick = function () {
         
       var t=  window.setInterval(function () {

            if (v.offsetLeft >500)
            {
                window.clearInterval(t)
            }

            v.style.width = v.offsetWidth   10   "px";

            v.style.left = v.offsetLeft   10   "px";
        }, 20)     
    }

</script>
View Code

-- 先用 var t; 接收 window.setInterval 的值，这个值就是定时器对象

 

会做饭的技术男
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript中setTimeout()和setInterval()两个定时器的区别和使用方法
nO0b
10-10 2104
两者最直接的区别是: setTimeout()在载入后延迟指定时间去执行一次表达式,只是一次。 setInterval()它从载入后,每隔指定的时间就执行一次表达式 所以要让一段代码, 某个函数以固定频率重复执行应该使用setInterval()函数 如果让一段代码, 某个函数在指定延迟后仅仅执行一次应该使用setTimeout() 语法 setInterval(code, mill...
JS计时器,setTimeout与setInterval
北冥de破草棚
08-30 419
学习JS，今天学到关于计时的课程，自己写一个计时器 学习的方法是setTimeout()，所以一开始用这个方法写 看起来好像没有问题，点击按钮计时器开始了。 可以过一会发现，再点击开始计时的按钮时，会以两倍的速度计时，这是个非常严重的问题。 从网上看来的要用setInterval，然后写法也变得高大上起来 这样确实避免了计时器重复计时的问题，但是还是有一个小问题， 假如
JavaScript中setTimeout()和setInterval()的使用以及区别
Wendy
02-20 8308
今天刚好在看setTimeout()的一个案例，在案例的解析中提到了setTimeout()和setInterval()的使用区别，但是比较理论，所以 决定自己也总结一下，写写例子帮助理解一下。        首先是说说这两个方法的具体时如何使用的。 1、setTimeout()方法       这个方法所有浏览器都支持，setTimeout( ) 是属于 window 的 method,
JavaScript---两种定时器，setTimeout和setInterval的区别
weixin_51060775的博客
04-02 604
setTimeout定义和用法 setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。 setTimeout 方法接收两个参数，第一个参数为回调函数函数或字符串，第二个参数为触发时间(单位：毫秒)。 setTimeout(code, milliseconds, param1, param2, ...)​ setTimeout(function, milliseconds, param1, param2, ...) 参数 描述 code 必需要调用...
js中两种定时器，setTimeout和setInterval的区别
热门推荐
shenyanwei的博客
03-31 9万+
setTimeout只在指定时间后执行一次，代码如下： //定时器 异步运行 function hello(){ alert("hello"); } //使用方法名字执行方法 var t1 = window.setTimeout(hello,1000); var t2 = window.setTimeout("hello()",3000);//使用字符串执行方法 window.clearTim
setTimeout() 和 setInterval 定时器的使用（带例题）
最新发布
qq_45310795的博客
08-27 1235
setTimeout() 和 setInterval 定时器的使用（带例题）
Javascript中setTimeOut和setInterval的定时器用法
01-19
Javascript的setTimeOut和setInterval函数应用非常广泛，它们都用来处理延时和定时任务，比如打开网页一段时间后弹出一个登录框，页面每隔一段时间发送异步请求获取最新数据等等。但它们的应用是有区别的。 ...
BOM系列第一篇之定时器setTimeout和setInterval
09-01
在BOM系列的第一篇中，我们重点关注的是定时器`setTimeout`和`setInterval`，这两个方法是JavaScript中处理异步编程的重要工具。 `setTimeout`方法允许我们在指定的毫秒数之后执行一个函数或字符串。它接受两个主要...
关于JS定时器（setTimeout setInterval）定时不准问题1
08-08
在JavaScript中，setTimeout和setInterval是两个基本的定时器函数，用于实现延迟执行或循环执行某个函数。然而，这两个函数在执行时往往和我们设置的延迟时间有出入。本文将深入探讨JS定时器的执行机制，分析why ...
理解javascript定时器中的setTimeout与setInterval
10-22
JavaScript定时器是编程中不可或缺的一部分，它们允许我们延迟或周期性地执行代码。本文将深入讲解JavaScript中的两个重要定时器函数：`setTimeout`和`setInterval`。 首先，`setTimeout`函数用于在指定延迟时间后...
javascript中SetInterval与setTimeout的定时器用法
10-23
它们都用来处理延时和定时任务，比如打开网页一段时间后弹出一个登录框，页面每隔一段时间发送异步请求获取最新数据等，本文文章通过代码示例给大家介绍javascript中SetInterval与setTimeout的定时器用法
讲解间隔型与延时型定时器的区别
weixin_44415461的博客
08-23 769
间隔型定时器 setInterval(fun,time) fun为执⾏的函数 time为间隔执⾏的时间，单位为毫秒，每过time时间就执⾏⼀ 次fun⾥⾯的代码 延时型定时器 setTimeout(fun,time) fun为执⾏的函数 time为延时执⾏的时间，单位为毫秒，经过time时间后执⾏ fun代码，只执⾏⼀次 <!DOCTYPE html> <html lang="e...
Javascript中定时器的使用方法
蒲厷渶と戀的博客
01-04 2万+
项目中，经常会用到定时器来实现数据实时更新、时间等，简单总结一下： Javascript中的定时器有两种，setInterval和setTimeout，而定时器的作用就是延迟执行。 一、定时器的写法 setInterval(expression,milliseconds)； setTimeout(expression,milliseconds)； 上式中，expression
JavaScript里的定时器，区别以及用法
qq_39224105的博客
04-27 5924
JavaScript中常用的定时器有三种: 1.setInterval ，按照指定间隔后把回调函数加入任务队列，js会逐个执行,并且会一直执行。 例如： var timer = setInterval( ()=> {alert("hi");},1000) 2.setTimeout，在指定的毫秒数后调用函数或计算表达式。 例如： var timer = setTimeout( ()=&...
Javascript中的定时器有哪些？他们的区别及用法是什么？
高先生的猫
04-16 5283
setTimeout()、setInterval()
无糖加冰
01-01 799
简述JS中两种定时器的用法 setTimeout()定时炸弹 setTimeout()使用时指定一个时间段,只要时间到了直接执行绑定的函数 setTimeout()中传递两个参数 第一个参数:事件所执行的函数 第二个参数:时间间隔就是时间段(以毫秒为单位) 实例 window.setTimeout(function(){ alert("hello"); },3000) 停止定时器 停止定时器方法取消了先前通过调用setTimeout()建立的定时器，括号中的参数
谈谈javascript中的定时器
01-06 685
最近写一些JS动画，常用到JS中的定时器(setTimeout & set Interval)，查找相关资料，有些心得与大家一起分享。 使用setTimeout & set Interval创建的定时器可以实现有趣且有用的功能，初学者可能对Javascript的定时器有误解，认为它们是线程，其实Javascript是运行于单线程中的，而定时器仅仅是计划在未来的某个时间执行...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值