首页 > 其他分享 >js——带暂停、启动功能的定时

js——带暂停、启动功能的定时

时间:2023-01-10 10:45:40浏览次数:41  
标签:Scheduled function interval js let timeout 暂停 call 定时

简单的封装,将 interval 二次封装,对外提供暂停、启动功能。

不足之处:interval定时间隔是固定的,在调用异步函数的时候,可能会出现bug。
例如:在调用ajax异步请求过程中,发送a、b两个请求,后台接到a请求需要3秒,接到b只需要1秒,b可能会优先于a执行。
(这种情况,需要用setTimeout()封装,等待前一个ajax完全结束,再启动下一个。业务代码与定时任代码会发生强耦合,暂时不考虑封装)

let Scheduled = function (){
}

/**
 * 循环作业
 * @param call 任务
 * @param timeout 时间间隔
 * @return {{star: star, parse: parse, isRunning: isRunning}}
 * @constructor
 */
let CycleWork = function (call, timeout) {
    let interval = undefined;
    return {
        /**
         * 暂停
         *
         * @returns void
         */
        parse: function () {
            if (interval !== undefined) {
                window.clearInterval(interval);
                interval = undefined;
            }
        },
        /**
         * 启动任务
         *
         * @returns void
         */
        star: function () {
            interval = window.setInterval(call, timeout);
        },
        /**
         * 是否在跑批中
         *
         * @return {boolean}
         */
        isRunning: function (){
            return interval !== undefined;
        }
    }
}

/**
 * 执行一个循环任务
 *
 * @param call 任务
 * @param times 次数
 * @param timeout 时间间隔
 */
Scheduled.prototype.runCycleWork = function (call, times, timeout) {
    let n = Math.abs(times);
    let interval = window.setInterval(() => {
        if (n === 0) {
            window.clearInterval(interval);
        } else {
            n--;
            call();
        }
    }, timeout);
}

Scheduled.prototype.CycleWork = CycleWork;

//保证单例,不需要第二个Layers
let scheduled = new Scheduled();
export default scheduled;

使用方式:

import Scheduled from '../../components/widget/scheduled'

export default {
    created: function () {
        let work = new Scheduled.CycleWork(()=>{console.log('test')}, 1000);

        work.start();

        Scheduled.runCycleWork(()=>{console.log('test2')}, 3, 1000);
    }
}

 

标签:Scheduled,function,interval,js,let,timeout,暂停,call,定时
From: https://www.cnblogs.com/chenss15060100790/p/17039414.html

相关文章

  • vuejs实现复制功能
    1、效果图 2、创建copyComm.js文件importVuefrom'vue';constvCopy={//名字爱取啥取啥  /*   bind钩子函数,第一次绑定时调用,可以在这里做初始......
  • js提取元素中的指定成员组成数组
    js提取元素中的指定成员组成数组一、概念map()方法定义在JavaScript的Array中,它返回一个新的数组,数组中的元素为原始数组调用函数处理后的值。二、语法array.map(fu......
  • jstl
    一. MVC模型(Model)-程序员编写程序应有的功能(实现算法等等)、数据库专家进行数据管理和数据库设计(可以实现具体的功能)。视图(View)-界面设计人员进行图形界面设计。......
  • JSP
    JSP1. 定义JSP全称JavaServerPages,是一种动态网页开发技术。它使用JSP标签在HTML网页中插入Java代码。标签通常以<%开头以%>结束。JSP是一种Javaservlet,主要用于实......
  • 浏览器访问 JSP 文件时无法进入 JavaScript 代码
    问题描述浏览器访问<head>中有JavaScript代码的JSP文件:<%@pagecontentType="text/html;charset=UTF-8"language="java"%><html><head><title>$Title......
  • 使用nvm安装不同版本的NodeJS
    下载及安装下载地址:https://github.com/coreybutler/nvm-windows/releases配置nodejs的镜像地址nvmnode_mirrorhttps://npmmirror.com/mirrors/node/nvmnpm_mirror......
  • yum安装指定版本nodejs
    curl-sLhttps://rpm.nodesource.com/setup_14.x|bash-yumremovenodesource-release*nodejsyumcleanallrm-rf/var/cache/yum/*rm/etc/yum.repos.d/nodeso......
  • 2.10 JSON数据及解析
    -------------------------------   ---------------------------------------------------- ......
  • 【JS】Primitive类型是按值访问和存储在栈上的吗?
    0x01Immutable在讨论原始类型是否为按值访问和存储在栈上前,先要理解JS原始类型的一个特殊性质:immutable《JavaScript高级程序设计》中有一段对字符串的描述:ECMAScrip......
  • 第二节:跨平台兼容/条件编译、页面路由(pages.json)、页面通讯(5种)、页面生命周期
    一.        二.        三.         !作       者:Yaopengfei(姚鹏飞)博客地址:http://www.cnblog......