定时器setInterval()与定时器的清除clearInterval()

最新推荐文章于 2024-03-24 08:04:43 发布
最新推荐文章于 2024-03-24 08:04:43 发布
阅读量1.4k 收藏
点赞数
文章标签： python
原文链接：https://my.oschina.net/firstnum/blog/724016
版权
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>primary animate test</title>
    <style>
        .animateModel{
            width: 200px;
            height: 200px;
            background: green;
            position: absolute;
            top: 0;
            left: 0;
        }
        #setup{
            margin-top: 220px;
            width: 200px;
            height: 40px;
            line-height: 32px;
            background: lightblue;
            color: white;    
            outline: none;
            padding: 0;
            font-size: 18px;
            cursor: pointer;
            border-radius: 5px;
        }
    </style>
</head>
<body>
    <div class="animateModel" id="moveModel"></div>
    <button id="setup" οnclick="startMove()">setup</button>
 
 
    <script>
    //1、定时器不唯一，开启和关闭定时器（多个定时器会导致速度变快）
    //2、函数出口，释放内存
        var timer=null;
        var speed=null;
        function startMove(){
            var moveModel=document.getElementById('moveModel');
            clearInterval(timer);//执行方法先关闭定时器    
            timer=setInterval(function(){//每执行一次方法就开一个定时器
                speed=1;
                if(moveModel.offsetLeft>=500){
                    clearInterval(timer);
                    return false;
                }else{
                    moveModel.style.left=moveModel.offsetLeft+speed+'px';
                }
            },30);
        }
    </script>
//优化
    <script>
        var animateModel={
            timer:null,
            speed:2,
            moveWidth:500,
            moveModel:document.getElementById('moveModel')
        }
        function startMove(){
            clearInterval(animateModel.timer);
            animateModel.timer=setInterval(function(){
                var offleft=animateModel.moveModel.offsetLeft;
                if(offleft>=animateModel.moveWidth){
                    clearInterval(animateModel.timer);
                    return false;
                }else{
                    animateModel.moveModel.style.left=offleft+animateModel.speed+'px';
                }
            },30);
        }
    </script>
</body>
</html>

转载于:https://my.oschina.net/firstnum/blog/724016

chichang2512
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
clearInterval(timer)和timer = null的区别
Miss卿
02-21 1万+
clearInterval(timer)和timer = null的区别 clearInterval(timer)的作用只是将定时器停止，但是timer对象本身还是存在的，比如这样就可以重启： var timer=setInterval(function(){},3000); $("div") .mouseover(function(){ //鼠标放上去关闭，离开再
JavaScript开启定时器、清除定时器（二十七）
CSDN凉宸
12-14 7623
js时间 window 对象允许以指定的时间间隔执行代码。 这些时间间隔称为定时事件。 通过 JavaScript 使用的有两个关键的方法： setTimeout(function, milliseconds) 在等待指定的毫秒数后执行函数。 setInterval(function, milliseconds) 等同于 setTimeout()，但持续重复执行该函数。 setTimeout() 和 setInterval() 都属于 HTML DOM Window 对象的方法。 setTime
vue中如何设置定时器，并清除定时器
最新发布
子玉的博客
03-24 372
设置定时器，每隔一秒更新。
设置定时器和清楚定时器setInterval
weixin_43258184的博客
12-27 913
设置定时器：vue文件一般写在mounted方法里。起定时器的名字this.reGetData。 1秒=1000毫秒。 this.reGetData = setInterval(() => { this.fetchData(); }, 60000); 清除定时器： 在vue的beforeDestroy钩子函数里： beforeDestroy: function() { if (this.reGetData) { //如果存在定时器就清除 clearInt
定时器（setTimeout()和setInterval()）的清除问题
牛牪犇
05-11 6874
方法一： 在每次重新设置定时器之前清除掉 方法二： 在销毁的钩子函数里销毁，防止污染 都是clearInterval（定时器返回的值，即timer） settimeout与setinterval清除时使用方式一致，即clearsetTimeout（）、clearInterval（） ...
javaScript 第六Bom编程
一个后端菜鸟的博客
07-23 178
BOM编程 目标： BOM编程 js：高级编程语言，弱类型语言，脚本语言，解释语言 java： 第一节：BOM编程 js：ECMAScript语法 DOM BOM 基本语法: 注释，变量，运算符，数据类型（number string null boolean undefined）， 流程控制 : 顺序，分支 if else : switch case，循环 while do while for 循环四要素： ​ 初始化 ​ 条件 ​ 代码块 步进表达式 对象：标签对象 获取标签对
Vue清除定时器setInterval优化方案分享
11-20
两种方案清除定时器，开发者经常使用方案1，建议使用方案2 方案1 首先我在data函数里面进行定义定时器名称： data() { return { timer: null // 定时器名称 } }, 然后这样使用定时器： this.timer = (() => { ...
vue setInterval 定时器失效的解决方式
11-19
正常情况下，在data里定义homeSetInterval 保存定时器的ID值 ，在销毁组件是使用clearInterval方法是可行的 但在使用了如下的keep缓存模式在使用销毁模式不行了 应该使用离开路由器前方法beforeRouteLeave 补充...
javascript中SetInterval与setTimeout的定时器用法
11-22
setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式,而setInterval()则是在每隔指定的毫秒数循环调用函数或表达式，直到clearInterval把它清除。也就是说setTimeout()只执行一次，setInterval()可以执行多...
Javascript中setTimeOut和setInterval的定时器用法
01-19
setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式,而setInterval()则是在每隔指定的毫秒数循环调用函数或表达式，直到clearInterval把它清除。也就是说setTimeout()只执行一次，setInterval()可以执行多...
JavaScript（四）BOM 浏览器对象模型
bug 消灭师的博客
04-24 185
JavaScript BOM 浏览器对象模型
JS垃圾回收机制、内存泄露
Darlingmi的博客
11-02 479
JS垃圾回收常见方法以及常见的内存泄露情况
setInterval定时器使用（个人理解）
weixin_43893483的博客
06-10 2111
setInterval()定时器的启动原则（通过实验得出的结论） 1：赋值定时器给timer变量时，应该是先执行定时器内的语句再赋值，假设是先赋值timer为定时器1（0s时触发的定时器），那么在执行clearInterval(timer)时，先赋值timer为定时器1（0s时触发的定时器），直接清空定时器1，clearInterval下面的语句则不执行。 2、每次将定时器赋值给timer不会清空上一次定时器，上一次定时器仍然在启动，实验如下： 代码： 执行结果： 从执行结果来看，onresize执
setInterval 和setTimeout 清空定时器，返回值,赋值为null的区别
03-29 5222
说到定时器，很多人都不陌生，觉得这个有什么说的，很简单的了，其实你真正的理解了它了吗？ 定时器的返回值是什么？clearInterval和 null有什么区别，可能有些干了几年的都不知道，下面我以setInterval为例来依次说下： 1.定时器的返回值 定时器是有返回值得，返回值代表着是第几个定时器，类型是number类型，也可以用来取消定时器，它是定时器的唯一标识符。 var num = 1...
JS中的setTimeout和setInterval
chelen_jak的专栏
04-15 833
转自： 一、setTimeout和setInterval的区别 setTimeout (表达式,延时时间) setInterval(表达式,交互时间) 延时时间/交互时间是以豪秒为单位的(1000ms=1s) setTimeout   在执行时,是在载入后延迟指定时间后,去执行一次表达式,仅执行一次 setInterval 在执行时,
setTimeout 和 setInterval 的区别.
网络Online
04-02 401
window对象有俩个定时方法, 分别是setTimeout和setInterval定时方法. 1、使用的语法相似setTimeout(fun, 1000), setInterval(fun2, 1000);fun、fun2分别是对象名,1000是时间，以毫秒为单位(1000ms为一分钟).2、setTimeout与setInterval释放的方法不同，分别为clearTimeout(
定时器setInterval()和clearInterval()的使用
weixin_45680024的博客
08-16 4012
setInterval()和clearInterval()
如何清除全部的定时器
热门推荐
qq_42816270的博客
01-16 1万+
如何清除全部的定时器
定时器setInterval和clearInterval的使用
jumubai的博客
11-02 314
简易倒计时的制作 js代码 //获取div var div=document.querySelector(".box"); let i=10; //setInterval执行多次的定时器 var timer=setInterval("time()",1000) function time(){ div.innerHTML="倒计时"+i+"秒"; i--; if(i<0){ //clearInter
jquery定时器setinterval
03-16
jQuery定时器setInterval是一个函数，用于在指定的时间间隔内重复执行指定的代码。它可以用于实现动画效果、轮播图、定时刷新等功能。使用setInterval函数时，需要指定要执行的代码和时间间隔，同时返回一个计时器ID，可以用于取消定时器。例如： ``` var timerId = setInterval(function(){ //要执行的代码 }, 100); //每隔1秒执行一次 ``` 要取消定时器，可以使用clearInterval函数，传入计时器ID即可。例如： ``` clearInterval(timerId); //取消定时器 ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值