js实现定时刷新,并设置定时器上限

定时器

在js中,有两种定时器:

  1. 倒计时定时器
    倒计时定时器,也叫延时定时器或一次性定时器
    功能:倒计时多长时间后执行某个动作
    语法:setTimeout(function, timeout);
    返回值:int类型,当前定时器是页面的第几个定时器,就返回几
    执行频率:只执行一次

    var timer2 = setTimeout (function(){
    console.log("倒计时定时器执行了"); // 2秒后执行,仅执行一次
    }, 2000);

  2. 间隔定时器
    间隔定时器,也叫反复性定时器或间歇性定时器
    功能:每间隔多长时间就执行某个动作
    语法:setInterval(function, timeout);
    返回值:int类型,当前定时器是页面的第几个定时器,就返回几
    执行频率:只要不关闭,会一直执行

    var timer2 = setInterval(function(){
    console.log("间隔定时器执行了"); // 每隔2秒执行一次
    }, 2000);

  3. 实践应用
    在PC端扫码支付的时候,可以通过倒计时定时器和间隔定时器来实现对订单支付状态的感知。比起通过websocket双向通信,更简单,几行代码就可以搞定

    // 倒计时定时器,假设支付订单失效时间是5分钟,那么设置一个倒计时定时器,从发起支付后开始倒时间,超过5分钟后,支付失败,跳转到订单明细页面
    setTimeout(function () {
    window.location.href = '订单明细页面';
    }, 300000);
    // 间隔定时器,每间隔2秒查询一次订单支付状态,若订单支付成功,跳转到订单明细页面
    setInterval(function() {
    $.ajax({
    url: '查询订单支付状态',
    type: 'get',
    dataType: 'json',
    data: {order_id: order_id},
    success: function (data) {
    if (data === 1) {
    window.location.href = '订单明细页面';
    }
    }
    })
    }, 2000);

相关推荐
MinterFusion3 分钟前
Java后端高频术语表
java·开发语言·后端·程序员·大厂面试·术语
CyrusCJA4 分钟前
Nodejs自定义脚手架
javascript·node.js·js
一只小阿乐8 分钟前
react中的zustand 模块化
前端·javascript·react.js·react状态管理·zustand
sycmancia9 分钟前
Qt——计算器示例(用户界面与业务逻辑的分离)
开发语言·qt·ui
用户842981424181010 分钟前
十二个JS混淆加密工具
javascript
专注VB编程开发20年14 分钟前
delphi死嗑Pascal冷门编程语言,Borland不认可 “通用多语言 IDE”,认为 “专有语言才是护城河”
开发语言·ide·delphi
hzxpaipai15 分钟前
外贸网站制作:为何派迪科技做的网站性能与打开速度如此不错?
开发语言·前端·网络·科技·安全
于先生吖15 分钟前
高并发稳定运营,JAVA 动漫短剧小程序 + H5 源码
java·开发语言·小程序
久爱@勿忘16 分钟前
uniapp H5 图片压缩并且转blob
前端·javascript·uni-app
Dashingl16 分钟前
uni-app 页面传值 报错:TypeError: $t.setAttribute is not a function
前端·javascript·uni-app