setInterval和setTimeout

最新推荐文章于 2024-12-12 23:53:15 发布

原创最新推荐文章于 2024-12-12 23:53:15 发布 · 234 阅读

0 ·

CC 4.0 BY-SA版权

javascript 专栏收录该内容

34 篇文章

订阅专栏

本文探讨了在支付模块中使用支付宝二维码支付时遇到的技术挑战，特别是如何利用轮询技术监听订单状态并刷新二维码。文章对比了setInterval与setTimeout的不同，并提出了一种改进的轮询策略，以确保更稳定的用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在项目的支付模块中，最后选用的是支付宝二维码支付方式，增添的一个算是比较有技术含量的东西，就是采用轮询的方式，监听订单状态，对二维码进行刷新。
代码如下：
这里写图片描述
这里使用了setInterval，但是有点问题，目前也没有用更好的方法来更换它。
我们可以从控制台看出，每隔五秒就会进行一次刷新，相应的发起一次请求，试想，如果一直请求，会不会造成崩溃~，当然的！！！
这里写图片描述

setInterval和setTimeout

setInterval在执行完一次代码之后，经过了那个固定的时间间隔，它还会自动重启代码进行执行。它算是一个计时器吧，给定时间，重复触发。
setTimeout 只执行一次代码段。然而，它算是一个定时器，到达一定的时间触发一次。

let today = new Date();

let showTimes1 = setInterval(function () {
    console.log('我是setInterval ' + today.toString());
}, 3000);

let showTimes2 = setTimeout(function () {
    console.log('我是setTimeout ' + today.toString());
}, 3000);

结果如图：（其是我本来想展示的是setTimeout的运行机制，但是貌似没有效果），这篇文章讲它们的运行机制，很棒的！
这里写图片描述

今天主要是想diss一下setInterval:

无视代码错误，即使你的代码有问题，依然循环调用。
无视网络延迟，也就是说每隔一段时间就通过Ajax轮询一次服务器，看是否需要更新。网络请求的受很多原因的影响（服务器过载，临时断网，用户带宽受限等），所需要的时间远比想象的要长，但是setInterval并不会在乎，它依然会按定时持续不断的触发请求，最终客户端网络队列会塞满ajax调用。
并不能保证，到了时间间隔，代码就准能执行，如果你调用的函数需要花很长的时间才能完成，某些调用就会被直接忽略。

当然，解决这些问题的办法就是用setTimeout(其是我觉着有点八杆子打不着的。)

在适当的时刻通过setTimeout来调用函数自身。
那么要怎样保证事件“匀速”被触发？可以用希望的延迟减去上次调用所花的时间，然后将得到的差值作为延迟动态指定给setTimeout，当然还是会有一丢丢的误差。

注：要清除这两个玩意儿（cb，指回调的函数）

clearTimeout(cb) //清除已设置的setTimeout对象
clearInterval(cb) //清除已设置的setInterval对象

文章参考
差不多就这样，结束！