setTimeout不可靠的修正办法及clearTimeout

最新推荐文章于 2022-03-22 23:56:46 发布
最新推荐文章于 2022-03-22 23:56:46 发布
阅读量424 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hddfuuh/article/details/83956347
版权

分享一下我老师大神的人工智能教程！零基础，通俗易懂！http://blog.csdn.net/jiangjunshow

也欢迎大家转载本篇文章。分享知识，造福人民，实现我们中华民族伟大复兴！

                       

javascript里的这两个定时器函数，大家一定耳熟能详：

setTimeout("函数()",毫秒)就是开启一个计时器，指定毫秒后执行该函数一次。
有关定时器，javascript还有另一个类似的函数，setInterval("函数()",毫秒)。不同的是，setInterval不是指定时间后执行一次该函数，而是每隔指定时间执行该函数，连续不断，直到clearInterval()。

问题是，在实际使用过程中，发现javascript的定时器很不靠谱。说好的多少多少时间后执行，但给人的感觉是忽快忽慢。明明指定3秒后执行，竟然5、6秒后才触发，或者不到1秒就触发了！

查阅资料，说是javascript为单线程，setTimeout之后，就注册了一个事件，进入排队，有空才执行，所以就慢了。大意如此。但快的情况呢？好像没说。

 

javascript引擎只有一个线程，迫使异步事件只能加入队列去等待执行。
  在执行异步代码的时候，setTimeout 和setInterval 是有着本质区别的。
  如果计时器被正在执行的代码阻塞了，它将会进入队列的尾部去等待执行直到下一次可能执行的时间出现（可能超过设定的延时时间）。
  如果interval回调函数执行需要花很长时间的话(比指定的延时长)，interval有可能没有延迟背靠背地执行。
  上述这一切对于理解js引擎是如果工作的无疑是很重要的知识，尤其是大量的典型的异步事件发生时，对于构建一个高效的应用代码片段来说是一个非常有利的基础。

JavaScript的计时器的工作原理

那么能不能修正呢？受网上文章启发，可以采用读取时间来应对：

 

setTimeout的时候，记录当前时间戳
  函数触发时，将时间戳与当前时间比较，看是否已经经过指定的毫秒数
  时间未够，则继续setTimeout，步长可改为1秒
  否则执行

<html><head></head><body><input type="button" value="开启" onclick="start()" /></body></html><script type="text/javascript">    var t;    var marktime = 0;    var offset = 3000;    function start(){        marktime = new Date().getTime();//1970年1月1日以来的毫秒数        t = setTimeout("hi()",offset);//3000毫秒后触发    }    function hi(){        if (new Date().getTime() - marktime < offset) {//时间未够            t = setTimeout("hi()",1000);//一秒后再来看看            return;        }        alert("Hello World!");    }</script>
  
  
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23

以上方法可应对比指定时间快的情况。

至于clearTimeout，经测试

var t = setTimeout("hi()",1000);clearTimeout();//不起任何作用clearTimeout(t);//将计时器t消除
  
  
  • 1
  • 2
  • 3

setTimeout的作用，就是注册一个计时器，计时器之间各自独立，不会覆盖和干扰；注册多少遍，就有多少个，执行指定函数后自己释放。所以每次setTimeout,应该获取返回值，以便操控：

var t = setTimeout("hi()",1000);clearTimeout(t);//将计时器t消除
  
  
  • 1
  • 2
           

给我老师的人工智能教程打call！http://blog.csdn.net/jiangjunshow
这里写图片描述
这是奶牛吗
关注
JavaScript计时器用法分析【setTimeout和clearTimeout】
10-20
JavaScript的计时器操作技巧不仅仅是setTimeout和clearTimeout的使用，还包括其他相关的内容。例如，JavaScript中的`setInterval`函数用于设置重复执行的计时器，`requestAnimationFrame`则是一个特殊的计时器，主要...
js中setTimeout()与clearTimeout()用法实例浅析
12-10
本文实例分析了js中setTimeout()与clearTimeout()用法。分享给大家供大家参考。具体分析如下： setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式. clearTimeout() 方法可取消由 setTimeout() 方法设置的 ...
setTimeout和clearTimeout的用法
weixin_33906657的博客
04-30 315
setTimeout 设置定时器，在一段时间之后执行指定的代码，setTimeout与setInterval的区别在于setTimeout函数指定的代码仅执行一次 方法一： window.setTimeout("alert('ok')",5000); 方法二： window.setTimeout(function() {    alert("Ok"); }, 5000); 方法三...
JS之setTimeOut与clearTimeOut
weixin_30372371的博客
11-30 136
小练习1：针对HTML，分别使用 setTimeout 和 setInterval 实现以下功能： 点击按钮时，开始改变 fade-obj 的透明度，开始一个淡出（逐渐消失）动画，直到透明度为0 在动画过程中，按钮的状态变为不可点击 在动画结束后，按钮状态恢复，且文字变成“淡入” 在 按钮显示 淡入 的状态时，点击按钮，开始一个“淡入”（逐渐出现）的动画，和上面类似按钮不可点，直到透明...
setTimeout 和 setInterval 的区别[原创修正]
Zzz's Blog
11-18 1157
window对象有两个主要的定时方法，分别是setTimeout 和 setInteval  他们的语法基本上相同，但是完成的功能取有区别。 　　setTimeout方法是定时程序，也就是在什么时间以后干什么。干完了就拉倒。一定要打对拼写,还有里面的函数一定要有引号. 　　setInterval方法则是表示间隔一定时间反复执行某操作。 　　如果用setTimeout实现setInerval的
setTimeout和clearTimeout
pursuer211的专栏
08-01 1190
setTimeout() 方法的返回值是一个唯一的数值，这个数值有什么用呢？如果你想要终止 setTimeout() 方法的执行，那就必须使用 clearTimeout() 方法来终止，而使用这个方法的时候，系统必须知道你到底要终止的是哪一个 setTimeout() 方法 (因为你可能同时调用了好几个 setTimeout() 方法)，这样 clearTimeout() 方法就需要一个参数，
setTimeout 和 clearTimeout
Tarafireworks的博客
08-24 1万+
1.先写一个错误的例子： function DealSomething() { //write some code window.setTimeout(function () { alert(“已经等待超过10分钟，自动关闭页面。”); }, 600000); } 这个例子的行为：不管是否处理完，超过10分钟后，都弹出这个alert框来。 2.再看另一个错误的例子，这次使用了clearTimeout函数来清除setTimeout。 func
微信小程序—setTimeOut定时器的问题及解决
10-16
`setInterval`可能会在特定情况下导致不准确的定时执行，而`setTimeOut`则更稳定，可以更好地控制代码执行的时机。 在使用`setTimeOut`时，基本语法如下： ```javascript var timerName = setTimeout(function() {...
setTimeout( )
faunjoe的专栏
05-27 586
setTimeout( )德嘉書業 / 德嘉資訊科技 (www.takka.com.hk)　作者: 伍新華 Email: ng-sun-wah@graduate.hku.hk 10.1　setTimeout( )1.　setTimeout( ) 語法例子2.　用 setTimeout() 來執行 function3.　不斷重複執行的 setTimeout( )
JS中的 setTimeout 和 clearTimeout
ToSimple的博客
06-30 1692
前言 有时需要延迟执行某个函数，可以考虑使用 setTimeout 方法；如果在超时时间内发生了某个事件，想要取消执行之前设置的方法，可以使用 clearTimeout 清理掉之前设置的 timeout 对象。 setTimeout setTimeout(function() { console.info(‘exec action') }, 3000) setTimeout 有两个参数，第一个参数是一个函数，表示需要延迟执行的函数。 第二参数是延迟时间，默认单位为毫秒，上面表示 3000 毫秒。
setTimeout()和clearTimeout用法详解
小太阳的博客
03-22 1万+
setTimeout()是window的方法，该方法用于在指定毫秒数后调用函数或者计算表达式。 我们一般常用的参数是两个，今天发现还有第三个参数 语法如下： setTimeout(code, delay, arg1, arg2, ...) // 不推荐 setTimeout(function() {}, delay, arg1, arg2, ...) 对于code这种方式，你可以使用字符串而不是安全function 的，在delay使用之后编译和执行字符串（使用该语法是不推荐的， 原因和 eval(.
js中setTimeout和clearTimeout的使用
热门推荐
SundayHugo的专栏
06-01 1万+
一、概念 1、js中可以通过setTimeout函数设置定时器，让指定的代码在指定的时间运动. 如果我们希望在setTimeout之行前终止其运行就可以使用clearTimeout()。 2、clearTimeout()用于重置js定时器，如果你希望阻止setTimeout的运行，就可以使用clearTimeout方法。 二、使用场景 1、写计时器 2、需要让程序隔一段时间处理什么事情，
setTimeout,clearTimeout的一些好用法
weixin_34166472的博客
01-24 395
if(hidden != 1){ $.ui.showMask(); var _aaa = setTimeout(function(){ $.ui.hideMask(); },5000); } //beforeSend,complete有方法但不能用 var url ...
计时器
lalalademaxi的博客
05-03 229
var c=0 var t function timedCount() { document.getElementById('txt').value=c c=c+1 t=setTimeout("timedCount()",1000) } function stopCount() { clearTimeout(t) }
开始和结束计数 setTimeout clearTimeout
weixin_37501775的博客
05-06 716
clearTimeout( setTimeout的ID）停止执行指定ID 的 setTimeout。 一般都是通过按钮触发这个命令。 在设定停止之前也必定对setTimeout函数进行了ID申明。下面是示范：&lt;!DOCTYPE HTML&gt; &lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text...
Javascript中setTimeout()和clearTimeout()还有setInterval()用法
01-16 7316
var timeout; timeout = setTimeout(hideResultsNow, 200);   //设定一个延迟时间，时间到了才会执行相应的method clearTimeout(timeout); //使它停下来，这就要用到clearTimeout()。 setInterval("reloop()",1000);  //循环执行指定方法
Js setTimeout,clearTimeout,setInterval,clearInteral详解
三丰的专栏
03-11 3796
设置定时器，在一段时间之后执行指定的代码，setTimeout与setInterval的区别在于setTimeout函数指定的代码仅执行一次 方法一： window.setTimeout("alert('ok')",5000); 方法二： window.setTimeout(function() {    alert("Ok"); }, 5000); 方法三：
JavaScript setTimeout() clearTimeout() 方法
ssisse的博客
08-27 3572
HTML DOM setTimeout() 方法 定义和用法 setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。 语法 setTimeout(code,millisec) 参数 描述 code 必需。要调用的函数后要执行的 JavaScript 代码串。 millisec 必需
js定时器setTimeout、clearTimeout、setInterval使用和区别
爬楼梯的前端小白的博客
02-05 1664
js定时器中setTimeout、clearTimeout、setInterval，三者之间的使用和区别
加了cleartimeout方法后settimeout方法不起作用
最新发布
09-08
在JavaScript中，setTimeout方法用于在指定的时间延迟后执行一段代码。而clearTimeout方法则用于取消之前通过setTimeout方法设置的定时器。在某些情况下，如果我们在设置了一个setTimeout定时器后立即使用clearTimeout方法来取消该定时器，那么这个定时器将不会被执行。 例如： ```javascript let timer = setTimeout(function() { console.log('Hello, World!'); }, 1000); clearTimeout(timer); ``` 在这个示例中，setTimeout方法设置了一个延迟1秒后输出"Hello, World!"的定时器。但是，我们在设置定时器后立即使用clearTimeout方法来取消该定时器，因此该定时器不会被执行，最终控制台不会输出任何内容。 换句话说，当我们调用clearTimeout方法取消了一个已经设置的定时器后，该定时器将被彻底清除，并且不会再执行相关的代码。这就是为什么在加了clearTimeout方法后，setTimeout方法不起作用的原因。 要解决这个问题，我们可以避免在设置setTimeout定时器后立即使用clearTimeout方法来取消该定时器。或者，我们也可以使用其他的控制逻辑来确保定时器在期望的时间内被执行。 总之，加了clearTimeout方法后，setTimeout方法不会起作用是由于取消了已设置的定时器。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值