# simple-schedule

**Repository Path**: littlevv/simple-schedule

## Basic Information

- **Project Name**: simple-schedule
- **Description**: 适用于vue的前端定时任务组件。
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 6
- **Forks**: 2
- **Created**: 2019-08-12
- **Last Updated**: 2022-03-23

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README


<!-- TOC -->

- [1. SimpleSchedule](#1-simpleschedule)
  - [1.1 简介](#11-简介)
  - [1.2 使用方式](#12-使用方式)
    - [1.2.1 组件安装](#121-组件安装)
    - [1.2.2 main.js中引用组件](#122-mainjs中引用组件)
    - [1.2.3 App.vue中注册全局任务](#123-appvue中注册全局任务)
    - [1.2.4 子组件监听定时任务](#124-子组件监听定时任务)
  - [1.2 Event](#12-event)
  - [1.3 Params](#13-params)
    - [1.3.1 基本参数](#131-基本参数)
    - [1.3.1 taskObject](#131-taskobject)
    - [1.3.2 taskParams](#132-taskparams)

<!-- /TOC -->
# 1. SimpleSchedule
## 1.1 简介
- 传统项目开发中，如果存在大量的定时轮训任务(多个位置多个文件中存在setInterval或者requestAnimationFrame)，会造成页面卡顿，定时任务执行异常，定时任务不可控制。可使用此组件，统一管理所有定时任务。轮训方式为requestAnimationFrame与SetInterval结合的方式进行轮训，窗口激活状态下使用requestAnimationFrame完成轮训，窗口非激活状态下自动切换回setInterval方式轮训。适用vue项目中使用。

## 1.2 使用方式
### 1.2.1 组件安装
```javascript
  cnpm install -S https://gitee.com/littlevv/simple-schedule.git#master
```

### 1.2.2 main.js中引用组件
```javascript
...
import SimpleSchedule from 'SimpleSchedule'
Vue.use(SimpleSchedule)

```

### 1.2.3 App.vue中注册全局任务
- (建议在app.vue中注册，这样可借助EventBus等在子组件中触发定时操作)
```javascript
...
// created钩子函数中初始化schedule.设置三个定时任务，任务id分别为（task1,task2,task3），执行事件间隔分别为1s,5s,10s.回调方法为
created () {
  this.$schedule.init({
    tasks: {
      task1: 1000,
      task2: 5000,
      task3: 10000
    },
    callBack: (params) => {
      this.$EventBus.$emit(params.taskId, {taskId: params.taskId, realTime: this.dealWithTime(new Date()), mode: params.mode})
    }
  })
  // 开启定时任务
  this.$schedule.start()
  }

```
### 1.2.4 子组件监听定时任务
- HeaderBar.vue
```html
<template>
...
</template>
<script>
export default {
  ...
  created () {
    this.$EventBus.$on('task1', () => {
      if(${SOME_CONDITION}) {
        // do sth.
      }
    })
    ...
  }
}
</script>
```

## 1.2 Event
|事件名称|说明|调用方式|
|---|---|---|
|start|开启定时任务|this.$schedule.start()|
|cacle|退出所有定时任务|this.$schedule.cancle()|
|parse|暂停所有定时任务，可以通过start再次唤醒|this.$schedule.parse()|

## 1.3 Params
### 1.3.1 基本参数
|name| type| default|备注|
|---|---|---|---|
|tasks|TaskObject|[]|任务列表|
|callBack|function(taskParams)|null|任务回调|

### 1.3.1 taskObject
|name|type|default| 备注|
|---|---|---|---|
|taskId|string|null|任务id|
|time|Integer|0|定时任务执行间隔|

### 1.3.2 taskParams
|name|type|default|备注|
|---|---|---|---|
|taskId|String|--|当前触发任务ID|
|realTime|Integer|--|触发当前任务的时间毫秒值|
|mode|String|--|触发当前任务所使用的轮训模式，RequestAnimationFrame&SetInterval|