js 使用setTimeout()代替setInerval()易错点

最新推荐文章于 2022-07-19 14:25:28 发布
最新推荐文章于 2022-07-19 14:25:28 发布
阅读量1k 收藏 1
点赞数
分类专栏： js 前端 文章标签： javascript 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46058763/article/details/121332068
版权
js 同时被 2 个专栏收录
7 篇文章 0 订阅
订阅专栏
前端
7 篇文章 0 订阅
订阅专栏
本文探讨了在JavaScript中如何使用setTimeout替换setInterval时的常见错误，包括回调函数引用问题和清除定时器时机的混淆。通过实例解析和错误分析，揭示了全局作用域下函数引用的重要性，并提供了正确操作代码示例。
摘要由CSDN通过智能技术生成

使用setTimeout()代替setInerval()易错点

跟着b站尚硅谷的JS基础视频自己在做 定时器案例 时出现了一些小错误。

案例描述

  • 正确

在这里插入图片描述

  • 错误

在这里插入图片描述

实现过程

不想看的可跳过此部分

//Code01
//一些获取元素对象初始化
let box1 = document.getElementById("box1"); //粉色盒子
let box1Width = parseInt(getStyle(box1, "width"));	//获取粉色盒子的width，这么写是为了提高浏览器的兼容性
let btn = document.getElementById("btn");	//键盘按钮
let line = document.getElementById("line");	//黑线            
let id, flag = false;	//id为定时器的唯一标识符  flag用来在定时函数中判断按钮是否按下

//btn按钮的响应事件
btn.onclick = function () {
    flag = true;
};

/*
 * 定义一个函数，用来获取指定元素的当前的样式
 * 参数：
 * 		obj 要获取样式的元素
 * 		name 要获取的样式名
 */
//正常浏览器的方式，具有getComputedStyle()方法
//IE8及其以下，使用 对象.currentStyle.样式名 的方法
function getStyle(obj, name) {
    return window.getComputedStyle ? getComputedStyle(obj, null)[name] : obj.currentStyle[name];
}
setInterval()实现
Code02
//使用setInterval()实现
id = setInterval(function () {
    if (flag) {
        box1.style.left = box1.offsetLeft + 5 + "px";
    }
    //box1碰到line就停止
    if ((box1.offsetLeft + box1Width) == line.offsetLeft) {
        clearTimeout(id);
    }
}, 50);
setTimeout()实现
//使用setTimeout()来实现
function moveRight() {
    //box1碰到line就停止
    if (flag) {
        box1.style.left = box1.offsetLeft + 5 + "px";
    }
    id= setTimeout(moveRight, 50);
    // console.log(id);
    // id = setTimeout("moveRight()", 50);
    //报错：VM42:1 Uncaught ReferenceError: moveRight is not defined 看网上说是要在全局作用域下才能这么写

    if ((box1.offsetLeft + box1Width) == line.offsetLeft) {
        // console.log("id " + id);
        clearTimeout(id);
    }
};
moveRight();

遇到的错误

setTimeout()中回调函数中应引用问题
//Code03
//使用setTimeout()来实现
function moveRight() {

    if (flag) {
        box1.style.left = box1.offsetLeft + 5 + "px";
    }    
    //box1碰到line就停止
    // // 判断box1右边是否碰到了线
    if ((box1.offsetLeft + box1Width) == line.offsetLeft) {
        clearTimeout(id);
    }
    id = setTimeout("moveRight()", 50);
    //【报错1】：VM42:1 Uncaught ReferenceError: moveRight is not defined
};
moveRight();
报错：VM42:1 Uncaught ReferenceError: moveRight is not defined
解决方法
//Code04
id = setTimeout(moveRight, 50);
原因

因为我是在window.onload属性下实现的该功能，我看一个博主说得要在该函数得要在全局作用域下才能写成"moveRight()"。

原因感觉不是特别清除，但是能够解决【求解答】

回调函数内id = setTimeout()和clearTimeout(id)使用顺序问题

哈哈哈哈，其实我Code03代码中存在错误，不知道有没有人发现，那就是我标题中所说的问题

正确操作
//Code05
//使用setTimeout()来实现
function moveRight() {
    if (flag) {
        box1.style.left = box1.offsetLeft + 5 + "px";
    }    
    //setTimeout()在前面
    id = setTimeout(moveRight(), 50);
    
    //clearTimeout()在后面
    if ((box1.offsetLeft + box1Width) == line.offsetLeft) {
        clearTimeout(id);
    }
    
};
moveRight();
原因：

如果将clearTimeout(id)写在前面

  • 在这里插入图片描述

如果将clearTimeout(id)写在后面

  • 在这里插入图片描述
进一步解释
  • 错误顺序
//使用setTimeout()来实现
function moveRight() {
    //box1碰到line就停止
    if (flag) {
        box1.style.left = box1.offsetLeft + 5 + "px";
    }
    
    if ((box1.offsetLeft + box1Width) == line.offsetLeft) {
        //在控制台中输出
        console.log("id " + id);
        clearTimeout(id);
    }  
    
    id = setTimeout(moveRight, 50);
    //在控制台中输出
    console.log(id);
   
};
moveRight();

在这里插入图片描述

我们可以看到clearTimeout()清除的是上一个延时定时器id = 14，而没有把新生成的演示定时器id = 15清除。

  • 正确顺序
//使用setTimeout()来实现
function moveRight() {
    //box1碰到line就停止
    if (flag) {
        box1.style.left = box1.offsetLeft + 5 + "px";
    }
    id = setTimeout(moveRight, 50);
    //在控制台中输出
    console.log(id);

    if ((box1.offsetLeft + box1Width) == line.offsetLeft) {
        //在控制台中输出
        console.log("id " + id);
        clearTimeout(id);
    }     
};
moveRight();

在这里插入图片描述

我们可以看到clearTimeout()清除的是新添加的定时构造函数。

完整代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>定时器01</title>
    <style>
        #box1 {
            position: absolute;
            top: 100px;
            left: 50px;
            width: 100px;
            height: 100px;
            background-color: pink;
        }

        #line {
            position: absolute;
            top: 0;
            left: 300px;
            width: 0;
            height: 1000px;
            border-left: 1px solid #000;
        }
    </style>
    <script>
        window.onload = function () {
            //一些获取元素对象初始化
            let box1 = document.getElementById("box1"); //粉色盒子
            let box1Width = parseInt(getStyle(box1, "width"));	//获取粉色盒子的width，这么写是为了提高浏览器的兼容性
            let btn = document.getElementById("btn");	//键盘按钮
            let line = document.getElementById("line");	//黑线            
            let id, flag = false;	//id为定时器的唯一标识符  flag用来在定时函数中判断按钮是否按下

            btn.onclick = function () {
                flag = true;
            };
            // //使用setInterval()实现
            // id = setInterval(function () {
            //     if (flag) {
            //         box1.style.left = box1.offsetLeft + 5 + "px";
            //     }
            //     //box1碰到line就停止
            //     if ((box1.offsetLeft + box1Width) == line.offsetLeft) {
            //         clearTimeout(id);
            //     }
            // }, 50);

            //使用setTimeout()来实现
            function moveRight() {
                //box1碰到line就停止
                if (flag) {
                    box1.style.left = box1.offsetLeft + 5 + "px";
                }

                id = setTimeout(moveRight, 50);
                // console.log(id);
                // id = setTimeout("moveRight()", 50);
                //报错：VM42:1 Uncaught ReferenceError: moveRight is not defined 看网上说是要在全局作用域下才能这么写

                if ((box1.offsetLeft + box1Width) == line.offsetLeft) {
                    // console.log("id " + id);
                    clearTimeout(id);
                }
                
            };
            moveRight();
        };
        /*
         * 定义一个函数，用来获取指定元素的当前的样式
         * 参数：
         * 		obj 要获取样式的元素
         * 		name 要获取的样式名
         */
        //正常浏览器的方式，具有getComputedStyle()方法
        //IE8及其以下，使用 对象.currentStyle.样式名 的方法
        function getStyle(obj, name) {
            return window.getComputedStyle ? getComputedStyle(obj, null)[name] : obj.currentStyle[name];
        }
    </script>
</head>

<body>
    <button id="btn">点击按钮以后box1向右移动</button>
    <div id="box1"></div>
    <div id="line"></div>
</body>

</html>
JonyXin
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
set一个带有进度的小setTimeout替代方案。-JavaScript开发
05-26
随时间更新（uot）随时间更新（uot）是一个微型库，可提供随时间更新值的最简单方法。 提供回调和持续时间，您准备好了！ 此实用程序对CSS动画很有用，“随时间更新（uot）”随时间更新（uot）是一个小型库，可提供随时间更新值的最简单方法。 提供回调和持续时间，您准备好了！ 此实用程序对CSS动画，DOM更改，WebGL过渡或可以根据进度值进行更新的任何内容很有用。 它基本上是一个带有进度的setTimeout（或setInterval）。 功能：体积小，无依赖项基于requestAnimationFrame针对多个实例进行了优化安装
BetterInterval:使用递归 setTimeout 代替本机 setInterval
06-08
总结，使用递归`setTimeout`代替`setInterval`是一种优化JavaScript定时任务的方法，它提高了时间间隔的精确性，简化了定时器管理，并允许更灵活的控制执行流程。对于需要精确控制周期性任务的应用，这是一个值得...
用settTimeout()代替setInterval()
黄治文的博客
02-13 1829
曾看到一篇文章里面写道setInterval()有很多弊端： 1.setInterval对自己调用的代码是否报错漠不关心。即使调用的代码报错了，它依然会持续的调用下去 2.setInterval无视网络延迟。在使用ajax轮询服务器是否有新数据时，必定会有一些人会使用setInterval，然而无论网络状况如何，它都会去一遍又一遍的发送请求，"如果网络状况不良，一个请求发出，还没有返回结果，它会...
JS方法setTimeout('函数名()',1000)无效的替代方法
tj_shenzhendaxue的专栏
10-28 1564
script type="text/javascript"> function sleep(ms) { var dt = new Date(); dt.setTime(dt.getTime() + ms); while (new Date().getTime() dt.getTime()); }   script> sleep(4000);
setTimeout迭代替换setInterval
weixin_30823001的博客
03-18 479
一.它们之间的区别 setTimeout - 仅执行一次 setInterval - 间隔执行 二.为什么推荐用setTimeout替换掉setIntelval？ javascript是异步执行的，所以setIntelval可能会延时 三. 演示与推荐 1. setTimeout // setTimeout仅在时间内执行一次 setT...
JavaScript 使用 requestAnimationFrame 代替 setInterval
司马懿的西山居
01-30 4844
转自 http://www.cnblogs.com/2050/p/3871517.html用js来实现动画，我们一般是借助setTimeout或setInterval这两个函数，css3动画出来后，我们又可以使用css3来实现动画了，而且性能和流畅度也得到了很大的提升。但是css3动画还是有不少局限性，比如不是所有属性都能参与动画、动画缓动效果太少、无法完全控制动画过程等等。所以有的时候我们还是不得
javascript几个易错点记录
10-25
以下是一些在实际项目中常常遇到的JavaScript易错点： 1. **清空输入框内容**：当你需要清除`<input>`标签的值时，错误的做法是使用`html("")`，正确的方法是使用`val("")`。`html("")`会清除元素的所有子节点，而`...
js学使用setTimeout实现轮循动画
10-19
### 知识点一：JavaScript中setTimeout函数的作用 `setTimeout`函数在JavaScript中用于设置一个定时器，该定时器在指定的毫秒数之后执行一个指定的函数或代码段。`setTimeout`函数接受至少两个参数： - 第一个参数...
Javascript中setTimeOut和setInterval的定时器用法
01-19
Javascript的setTimeOut和setInterval函数应用非常广泛，它们都用来处理延时和定时任务，比如打开网页一段时间后弹出一个登录框，页面每隔一段时间发送异步请求获取最新数据等等。但它们的应用是有区别的。 ...
快速掌握Node.js中setTimeout和setInterval的使用方法
12-23
在node.js中可以使用node.js内置的setTimeout(callback,delayMillSeconds,[args])方法。当调用setTime()时回调函数会在delayMillSeconds后 执行.setTime() 会返回一个定时器对象ID，可以在delayMillSeconds到期前将...
js代码-settimeout 模拟实现 setinterval(带清除定时器的版本)
07-14
js代码-settimeout 模拟实现 setinterval(带清除定时器的版本)
JS新玩法：使用setTimeout()来模拟周期可变的setInterval()
double_sweet1的博客
03-28 1005
问题描述： 使用setTimeout动态的修改setInterval的周期依次为a,a+b,a+2b,a+3b,...,a+nb。并在指定时间后停止这个周期函数。 问题关键点： （1）动态的修改setInterval的周期 （2）在指定时间后停止这个周期函数 问题实现思路： 针对第一个点，动态的修改setInterval的周期，直接在原始的interval上修改是不会生效的，也就是下面这种写法： let count = 0; setInterval(() => { co
项目中用setTimeout代替setInterval
youhebuke225的博客
06-14 1065
为什么要用setTimeout代替setInterval 博客参考 点击，需要注意的是这两个定时器并不是定时执行，一般会延后一点点，秒数所表示的是，在一定时间后，被放入到队列中 setInterval的缺陷 使用 setInterval某些间隔会被跳过不执行 当使用 setInterval时，仅当队列中没有该定时器的任何其他代码时，才会将定时器代码加入到队列中 可以这么理解：每个setTimeout产生的任务会直接push到任务队列中；而setInterval在每次把任务push到任务队列前，都要进
js中setInterval和setTimeout
liujiujiang的博客
07-18 533
这两个应该大家都认识，我也就不多解释了。今天发现了一个很经典的例子，看下 for (var i = 0; i < 5; i++) { setTimeout(function() { console.log(i); }, 1000); } 先说下这个不是问你的打印的是什么，是5个5没错，但是是每隔1秒输出一个5 ？还是一秒后立即输出5个5？ ...
为什么用setTimeout代替setInterval？
weixin_34348111的博客
04-18 682
参考文档 setInterval 1. “丢帧”现象（setInterval()仅当没有该定时器的任何其他代码实例时，才将定时器代码添加到队列中） 2. 代码的执行间隔 <= 预期 复制代码 在1.7s处，func1在执行，func2在队列里等待执行，func2就是该定时器的代码实例，按照JS引擎的处理，func3不会加入到事件队列里，更别说执行了，这就导致出现了“丢帧”现象 在2s处，f...
前端优化之使用-setTimeout代替setInterval
miin_ying的博客
07-19 1853
setInterval 导致网页越来越卡的原因，以及解决方法
运用setTimeout 替换 setInterval
wocaonima332的博客
01-06 1310
通用的代码如下， setTimeout(function(){ //do something setTimeout(arguments.callee, time); }, time); 具体的代码如下 Repeating Timers Example
[译]可以自纠正的setInterval代替方法
simon4545的专栏
01-06 2638
最近，我在做一些有关setInterval方法的尝试.对于初学者来说，setInterval是可以让你在指定的时间间隔里重复执行某段代码的方法。 比如，你可以用下面的代码创建一个每秒执行的时间间隔 setInterval(function() { console.log('I execute every second!'); }, 1000); 受JavaScript单线程机
用定时器代替事件
xiaoyaofeiba的专栏
12-22 497
有时候 我们找不到合适的事件了， 可以用时间间隔很短的定时器做很多事情的 。
为啥一般使用requestAnimationFrame 代替setTimeout
最新发布
12-15
使用requestAnimationFrame代替setTimeout的原因有以下几点： 1. requestAnimationFrame的执行时间是由浏览器决定的，它会根据浏览器的刷新频率来决定回调函数的执行时间，因此可以保证动画的流畅性和性能。 2. 当...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值