javascript中轮询一个接口的方法,setInterval和setTimeout + 递归、requestAnimationFrame

这篇具有很好参考价值的文章主要介绍了javascript中轮询一个接口的方法,setInterval和setTimeout + 递归、requestAnimationFrame。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

轮询:就是定时重复请求一个接口,比如,我们想要知道一个订单的状态,就需要轮训订单状态的接口,查询到我们想要的结果 (支付成功或者失败) 就终止轮询。

方法一:setInterval

这个方法我们一般都能想到,用法很简单,但是这种方法,如果我们忘记了清空定时器就会导致内内存栈溢出。

function checkOrderStatus() {
    console.log(1);
}

const timer = setInterval(() => {
    checkOrderStatus()
}, 1000)

// 退出的时候一定要清空
clearInterval(timer)

方法二:setTimeout + 递归

所以我们还可以使用setTimeout进行轮询,可以省掉清空定时器的步骤,特别适合异步请求中,在请求返回之后,重新设置setTimeout定时即可

function checking() {
    setTimeout(() => {
        // 假设 checkOrderStatus是一个异步函数
        checkOrderStatus().then((res) => {
            // 满足条件停止递归
            if (res) {
                //
            } else {
                checking()
            }
        })
    }, 3000);
}

方法三:使用requestAnimationFrame模拟定时器

请参考我的这篇文章

使用requestAnimationFrame模拟定时器setInterval_我有一棵树的博客-CSDN博客使用requestAnimationFrame模拟定时器setIntervalhttps://blog.csdn.net/qq_17335549/article/details/128089405文章来源地址https://www.toymoban.com/news/detail-602247.html

到了这里,关于javascript中轮询一个接口的方法,setInterval和setTimeout + 递归、requestAnimationFrame的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 定时器 setTimeout、setInterval详解

    定时器:按我个人理解来说就是固定某个时间后,时间到了,就提醒我时间到了。 程序中的定时器:相当于倒计时,也相当于计时器。作用是在设定的某个时间后,执行特定的方法。 我们先来了解一下setTimeout定时器,他的特点就是只能用一次,也称为一次性定时器。 接着看

    2023年04月08日
    浏览(26)
  • setTimeout、setInterval、requestAnimationFrame:特点、区别、应用场景

    还是大剑师兰特 :曾是美国某知名大学计算机专业研究生,现为航空航海领域高级前端工程师;CSDN知名博主,GIS领域优质创作者,深耕openlayers、leaflet、mapbox、cesium,canvas,webgl,echarts等技术开发,欢迎加底部微信(gis-dajianshi),一起交流。 No. 内容链接 1 Openlayers 【入门教

    2024年04月09日
    浏览(28)
  • Vue中 使用定时器 (setInterval、setTimeout)

    js中定时器有两种,一个是 循环执行 setInterval ,另一个是 定时执行 setTimeout 。 注意:定时器需要在页面销毁的时候清除掉,不然会一直存在! 1. 循环执行( setInterval ) 顾名思义,循环执行就是设置一个时间间隔,每过一段时间都会循环执行这个方法,直到这个定时器被销毁

    2024年02月12日
    浏览(32)
  • js中的定时器 setTimeout()和setInterval()

    JavaScript 定时器,有时也称为“计时器”,用来在经过指定的时间后执行某些任务,类似于我们生活中的闹钟。 在 JavaScript 中,我们可以利用定时器来延迟执行某些代码,或者以固定的时间间隔重复执行某些代码。例如,您可以使用定时器定时更新页面中的广告或者显示一个

    2024年02月14日
    浏览(33)
  • 定时器的设置和清除setTimeout、setInterval、setImmediate-NodeJs

    JS是单线程运行逻辑,所有的程序默认在一个线程执行,出现排队执行。所有的定时器中,回调函数会在主线程后事件队列中执行。              一次性定时器的 开启:当间隔时间到了,会调用 一次 回调函数,间隔时间的单位是毫秒。               var timer=setTimeout(回

    2024年02月04日
    浏览(34)
  • 【Vue3+Ts project】vant4 实现触发指定表单 rules校验、setTimeout和 setInterval 区别

      一.使用 vant组件  validate属性 实现 触发指定输入框rules校验 ,满足校验通过否则失败  1. 给form表单绑定 ref并定义值名称 ,然后为你想校验的表单绑定 name值 2.为ref的值名称定义变量名 ,然后 ref值名称.value.validate(\\\'name值名称\\\'),.then接收成功 , .catch 接收失败   二. setT

    2024年02月11日
    浏览(41)
  • JavaScript:setInterval() 用法详解

    setInterval() 是 JavaScript 中的一个内置函数,它用于在指定的间隔时间内重复执行一段代码,实现周期性操作。该函数的语法如下: function :必需,要重复执行的函数或代码块。 milliseconds :必需,重复执行的时间间隔(以毫秒为单位)。 param1, param2, ... :可选,传递给要执行

    2024年02月09日
    浏览(24)
  • AsyncContext优雅实现HTTP长轮询接口

    接到一个需求,实现方案时需要提供一个HTTP接口,接口需要hold住5-8秒,轮询查询数据库,一旦数据库中值有变化,取出变化的值进行处理,处理完成后返回响应。这不就是长轮询吗,如何优雅的实现呢? 在这之前先简单介绍下长连接和短连接 HTTP长链接(Keep-Alive) 概念:

    2024年02月09日
    浏览(27)
  • JavaScript 用三种方法做一个简易计算器

    基本数据类型 / 使用对象创建 new执行过程 // 1.new构造函可以在内存中创建了一个空的对象 // 2.this就会指向刚才创建的空对象 // 3.执行构造函数里面的代码 给这个空对象添加属性和方法 // 4.返回这个新对象(所以构造函数里面不需要return)

    2024年02月06日
    浏览(43)
  • JavaScript 中获取数组最后一个元素3种方法及性能

    当需要从 JavaScript 中的数组中获取最后一个元素时,有多种选择,本文将提供 3 种可用方法。 1. 数组 length 属性 length 属性返回数组中元素的数量。从数组的长度中减去 1 得到数组最后一个元素的索引,使用它可以访问最后一个元素。从长度中减去 1 的原因是,在 JavaScript 中

    2024年02月06日
    浏览(41)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包