JavaScript实现手写原生任务定时器

功能介绍

定时器顾名思义就是在某个特定的时间去执行一些任务,现代的应用程序早已不是以前的那些由简单的增删改查拼凑而成的程序了,高复杂性早已是标配,而任务的定时调度与执行也是对程序的基本要求了。通过时间表达式来进行调度和执行的一类任务被称为定时任务,很多业务需求的实现都离不开定时任务。

在javascript中要实现定时任务也是很简单的,可以选择插件,也可以自己写一个简单的定时任务,这里就个给大家写一个简单的 setInterval() 循环定时任务。功能有,启动定时任务、停止定任务、添加定时任务、清除定时任务、执行定时器的方法。

实现调用演示

1.定义两个方法 有参和无参

function a1(value = "") {
            console.log("定时任务被调用了 携带的参数==>>", value)
        }

        function a2() {
            console.log("定时任务被调用了 我是无参数")
        }

2. 实现定时任务

let daily_time = {
            func: a1,
            parm: "我是每秒",
            year: "*",
            month: "*",
            date: "*",
            hours: "*",
            minutes: "*",
            seconds: "*"
        }
        let monthly_transaction = {
            func: a2,
            parm: null,
            year: "*",
            month: "*",
            date: "*",
            hours: "*",
            minutes: "1",
            seconds: "*"
        }

        let monthly_summary = {
            func: a1,
            parm: "我是每小时 1分 1秒",
            year: "*",
            month: "*",
            date: "*",
            hours: "*",
            minutes: "1",
            seconds: "1"
        }
        addTimer(daily_time)
        addTimer(monthly_transaction)
        addTimer(monthly_summary)
        startTimer()

创建定时任务js 代码文件 复制使用即可

bg-timer.js

// 缓存定时任务
// {
//     func 方法名
//  parm 方法参数

//     year 年
//     month 月
//  date 日
//     hours 时
//     minutes 分
//     seconds 秒
// }
//  * 表示每刻都执行  数字 表示定时这个时间执行

/**
* 每年 1月1日1时1分1秒
* year *
* month 1
* date 1
* hours 1
* minutes 1
* seconds 1
*/

/**
* 每年每月每日每时1分每秒
* year *
* month *
* date *
* hours *
* minutes 1
* seconds *
*/

/**
* 每秒
* year *
* month *
* date *
* hours *
* minutes *
* seconds *
*/

var timer_list = []
var is_timer = null

// 启动
function startTimer() {
    console.log("启动定时任务")
    if (!is_timer) {
        timeoutFunc()
    }
}

// 停止
function stopTimer() {
    console.log("停止定时任务")
    if (is_timer) {
        clearInterval(is_timer);
        is_timer = null
    }
}

// 清除定时任务
function cleanTimer() {
    stopTimer()
    timer_list = []
}

// 添加定时任务
function addTimer(item = {}) {
    let n = {
        "func": item.func || null,
        "parm": item.parm || null,
        "year": item.year || "*",
        "month": item.month || "*",
        "date": item.date || "*",
        "hours": item.hours || "*",
        "minutes": item.minutes || "*",
        "seconds": item.seconds || "*"
    }
    timer_list.push(n)
}

function timeoutFunc() {
    if (is_timer) {
        return
    }
    is_timer = setInterval(function() {
        let da = new Date()
        let fullYear = (da.getFullYear()).toString()
        let month = (da.getMonth()).toString()
        let dat = (da.getDate()).toString()
        let hours = (da.getHours()).toString()
        let minutes = (da.getMinutes()).toString()
        let seconds = (da.getSeconds()).toString()

        // console.log("定时......",timer_list)
        // console.log("年:", fullYear)
        // console.log("月:", month)
        // console.log("日:", dat)
        // console.log("时:", hours)
        // console.log("分:", minutes)
        // console.log("秒:", seconds)

        for (let i in timer_list) {
            let item = timer_list[i]

            if (item.year != "*" && item.year != fullYear) {
                continue
            }
            if (item.month != "*" && item.month != month) {
                continue
            }
            if (item.date != "*" && item.date != dat) {
                continue
            }
            if (item.hours != "*" && item.hours != hours) {
                continue
            }
            if (item.minutes != "*" && item.minutes != minutes) {
                continue
            }
            if (item.seconds != "*" && item.seconds != seconds) {
                continue
            }
            console.log("调用定时任务", item)
            if (item.func && item.parm) {
                item.func(item.parm)
            } else {
                item.func()
            }
        }
    }, 1000)
}

到此这篇关于JavaScript实现手写原生任务定时器的文章就介绍到这了,更多相关JavaScript任务定时器内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • JavaScript 定时器详情

    目录 1.简单介绍 2.setInterval 2.1 描述 2.2 参数 2.3 返回值 2.4 用法 3.setTimeout 3.1 描述 3.2 参数 3.3 用法 4.取消timer 5.在控制台使用定时器 1.简单介绍 在JavaScript中定时器有两个 setInterval() 与 setTimeout() 分别还有取消定时器的方法. 这都是window的对象,调用时可以省略window.这两个方法并不在 JavaScript 的规范中. 定时器方法相关方法有四种: 方法 描述

  • JavaScript定时器常见用法实例分析

    本文实例讲述了JavaScript定时器常见用法.分享给大家供大家参考,具体如下: 定时器 定时器在javascript中的作用 1.制作动画 2.异步操作 3.函数缓冲与节流 定时器类型及语法 /* 定时器: setTimeout 只执行一次的定时器 clearTimeout 关闭只执行一次的定时器 setInterval 反复执行的定时器 clearInterval 关闭反复执行的定时器 */ var time1 = setTimeout(myalert,2000); var time2 =

  • 详解JavaScript的定时器

    目录 简单介绍 setInterval 描述 参数 返回值 用法 setTimeout 描述 参数 用法: 取消timer 在控制台使用定时器 console.time(timerName) console.timeEnd(timerName) 用法 总结 简单介绍 在JavaScript中定时器有两个 setInterval() 与 setTimeout() 分别还有取消定时器的方法. 这都是window的对象,调用时可以省略window.这两个方法并不在 JavaScript 的规范中. 定

  • JavaScript定时器使用方法详解

    本文实例为大家分享了JavaScript定时器使用的具体代码,供大家参考,具体内容如下 定时器分类 1.循环执行:一段程序能够每间隔一段时间执行一次[setInterval()][clearInterval()] 2.定时执行(一次定时器):某一段程序需要在延迟多少时间后执行[setTimeout()][clearTimeout()] 定时器使用 使用注意:为了防止定时器累加,使用定时器要先清除后设置:要保证内存中只有一个定时器. 1.循环执行:一段程序能够每间隔一段时间执行一次 设置定时器:[

  • JavaScript定时器原理

    目录 一. setTimeout() 定时器 二.停止 setTimeout() 定时器 三.setInterval() 定时器 四.清除setInterval() 定时器 五.电子时钟案例 前言: 在很多页面中,我们都可以看到一些倒计时或者和时间相关的效果,今天小熊将就JavaScript里面的倒计时做一概述. 首先,我们先来看看定时器,在JS中,有两种定时器: 一. setTimeout() 定时器 语法: window.setTimeout(调用函数, [延迟的毫秒数]); setTime

  • JavaScript定时器类型总结

    目录 1.setInterval() 2.setTimeout() 1.setInterval() 按照指定的周期(以毫秒计)来调用函数. 方法会不停地调用函数,直到调用clearInterval() 或窗口被关闭. 语法: setInterval(code,millisec,[arg1, arg2, ...]) 参数 描述 code 必需.要执行的代码串. millisec 必须.时间间隔,以毫秒计. arg1, arg2, - 可选.当定时器过期的时候,将被传递给func指定函数的附加参数

  • JavaScript实现手写原生任务定时器

    功能介绍 定时器顾名思义就是在某个特定的时间去执行一些任务,现代的应用程序早已不是以前的那些由简单的增删改查拼凑而成的程序了,高复杂性早已是标配,而任务的定时调度与执行也是对程序的基本要求了.通过时间表达式来进行调度和执行的一类任务被称为定时任务,很多业务需求的实现都离不开定时任务. 在javascript中要实现定时任务也是很简单的,可以选择插件,也可以自己写一个简单的定时任务,这里就个给大家写一个简单的 setInterval() 循环定时任务.功能有,启动定时任务.停止定任务.添加定时任务

  • 前端面试JavaScript高频手写大全

    目录 1. 手写instanceof 2. 实现数组的map方法 3. reduce实现数组的map方法 4. 手写数组的reduce方法 5. 数组扁平化 5. 1 es6提供的新方法 flat(depth) 5.2 利用cancat 6. 函数柯里化 7. 浅拷贝和深拷贝的实现 7.1浅拷贝和深拷贝的区别 8. 手写call, apply, bind 8.1 手写call 8.2 手写apply(arguments[this, [参数1,参数2.....] ]) 8.3 手写bind 9.

  • 分享10个常见的JavaScript前端手写功能

    目录 1.防抖 2.节流 3.深拷贝 4.手写 Promise 5.异步控制并发数 6.继承 7.数组排序 8.数组去重 9.获取 url 参数 10.事件总线 | 发布订阅模式 1.防抖 function debounce(fn, delay) {   let timer   return function (...args) {     if (timer) {       clearTimeout(timer)     }     timer = setTimeout(() => {  

  • JavaScript手写call,apply,bind方法

    目录 前言 改写this实现思路 前期准备 手写call方法 手写apply方法 手写bind方法 前言 改变this指向在书写业务的时候经常遇到,我们经常采用以下方法进行改写 使用作用声明变量存储this 使用jJavaScript的原生方法call,apply,以及bind进行改写 第一种方法就不说了,就是一个变量存储的问题,主要说第二种如何实现的 call,bind,apply方法都是JavaScript原生的方法,挂载在Function原型上,使得所有函数都可以调用,今天我们来实现一下c

  • 纯JavaScript手写图片轮播代码

    废话不多说了,直接给大家贴js代码实现手写图片轮播的代码了,代码非常简单,具体代码如下所示: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>js图片轮播切换</title> <style type="text/css"> .imgCon{width: 400px;height: 400px;border: 2p

  • 「中高级前端面试」JavaScript手写代码无敌秘籍(推荐)

    1. 实现一个new操作符 new操作符做了这些事: 它创建了一个全新的对象. 它会被执行[[Prototype]](也就是__proto__)链接. 它使this指向新创建的对象.. 通过new创建的每个对象将最终被[[Prototype]]链接到这个函数的prototype对象上. 如果函数没有返回对象类型Object(包含Functoin, Array, Date, RegExg, Error),那么new表达式中的函数调用将返回该对象引用. function New(func) { va

  • JavaScript手写数组的常用函数总结

    前言 在开发过程中,我们常常使用数组的一些 api 相关操作,其中包含 forEach . filter . find . findIndex . map . some . every . reduce . reduceRight 等函数方法. 今天,我们试试手写这些函数,实现数组这些函数方法.为了方便,直接在数组原型对象 prototype 上扩展. 本文 Githab 已上传,更多往期文章已分类整理. 正文 参数说明 callbackFn 回调函数 thisArg 执行 callbackFn

  • JavaScript手写Promise核心原理

    目录 准备 完善 resolve/reject then 异步处理 链式调用 边界处理 catch 优化后完整代码 准备 首先,promise 有三种状态:pending fulfilled rejected; promise在实例化操作中, 有两个改变状态的方法,分别为resolve,reject; promise有很多方法,详情请见 mdn, 本篇文章先实现 promise的核心api: then和catch; 我们使用 es6 提供的 class 来实现 class MyPromise {

  • 万字详解JavaScript手写一个Promise

    目录 前言 Promise核心原理实现 Promise的使用分析 MyPromise的实现 在Promise中加入异步操作 实现then方法的多次调用 实现then的链式调用 then方法链式调用识别Promise对象自返回 捕获错误及 then 链式调用其他状态代码补充 捕获执行器错误 捕获then中的报错 错误与异步状态的链式调用 将then方法的参数变成可选参数 Promise.all方法的实现 Promise.resolve方法的实现 finally方法的实现 catch方法的实现 完整

  • JavaScript手写异步加法asyncAdd方法详解

    目录 前言 分析 asyncAdd 直观的基本要求 隐藏的考察点 — setTimeout & cb 隐藏的考察点 — async & await 实现 asyncAdd 具体实现 进行优化 抽离内层函数 缓存计算结果 前言 在掘金上发现一道既简单但个人觉得还挺有意思的一道题,题目如下: // 异步加法 function asyncAdd(a,b,cb){ setTimeout(() => { cb(null, a + b) }, Math.random() * 1000) } as

随机推荐