npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

timeout-provider

v1.0.2

Published

一个Javascript封装的定时器使用插件

Downloads

2

Readme

timeout-provider

一个Javascript封装的高级定时器使用插件

插件的设计初衷

在项目开发中我们会有很多时候需要使用到定时器的功能,所以对定时器的使用进行一个约束使得开发中都能使用统一的语法来进行开发那对于后期的维护是有很大帮助的。

插件的设计思想

  1. 在项目统一使用定时器、节流函数的用法
  2. 针对循环定时器提供执行方法,不使用setInterval

构建配置抽离成npm包的意义

通用性
  1. 业务开发者无需关注构建配置
  2. 统一团队构建脚本
可维护性
  1. 构建配置合理的拆分
  2. README 文档、ChangeLog文档等
质量
  1. 冒烟测试、单元测试、测试覆盖率
  2. 持续集成

编辑器

  1. Visual Studio Code

语言

  1. javascript ES6

构建工具

  1. "webpack": "^4.41.2"
  2. "webpack-cli": "^3.3.9"

构建命令

  1. npm run build

更新状态

版本 | 时间 ---|--- 1.0.0 | 2019-12-17


库目录结构

未压缩版: timeout-provider.js
压缩版:timeout-provider.min.js

使用

使用npm

$ npm install timeout-provider --save

使用cdn

<script type="text/javascript" src="timeout-provider.min.js"></script>

示例:

// 导入插件
import TimeoutProviderLibrary from 'timeout-provider'

// eslint-disable-next-line
const tp = new TimeoutProviderLibrary()
const Person = function () {
  this.name = '小明'
}
const personInstance = new Person()
// 单个定时器
let see = function (...params) {
  console.log(params[0], ' ', this.name, ' ', params[1]);
}
tp.setTimeout(personInstance, see, 2000, 'hello', '!')

// 循环定时器
window.counter = 5
let run = function (...params) {
  console.info(params[0], ' ', this.name, ' ', params[1]);
  return window.counter--
}
tp.setInterval(personInstance, run, 2000, 'go', 'run')

// 节流定时器
let doSize = function () {
  console.info('resize');
}
var myDebounce = tp.setThrottle(personInstance, doSize, 3000)
// 请注意:这里使用了jquery来做示例
// eslint-disable-next-line no-undef
jQuery(window).resize(myDebounce);


类: TimeoutProviderLibrary

构造器 Constructor

new TimeoutProviderLibrary()

示例

const TimeoutProvider = new TimeoutProvider()

方法

函数:setInterval(scope, handler, interval, …params) → {number}

说明:用于需要循环调用的定时器

注意:handler执行函数必须返回boolean类型

名称 | 类型 | 属性 | 默认值 | 描述 ---|---|---|---|--- scope | Object | | null | 提供给 handler 参数的作用域 handler | function | | | 执行函数 interval | number | | 1000 | 时间(毫秒) params | * | 可选、可变参 | | 定时器接收的额外参数

实例:

window.counter = 5;
const person = function(){this.name='小明'}
const doEat = function(...params){
  console.log(params[0], this.name, params[1]);
  return window.counter--;
}
timeoutProvider.setInterval(new person, doEat, 2000, 'hello', '!')

函数:setThrottle(scope, handler, wait, options) → {function}

说明:节流定时器,在指定时间后执行

注意:返回新的 debounced(防抖动)函数,可以用于取消防抖动调用

名称 | 类型 | 属性 | 默认值 | 描述 ---|---|---|---|--- scope | Object | | null | 提供给 handler 参数的作用域 handler | function | | null | 执行函数 wait | number | | 1000 | 需要延迟的毫秒数 options | Object | 可选 | { leading: false, trailing: true } | 选项对象

实例:

let doSize = function () {console.info('resize');}
var myDebounce = tp.setThrottle(personInstance, doSize, 3000)
jQuery(window).resize(myDebounce);

函数:setTimeout(scope, handler, timeout, …params) → {number}

说明:单个定时器

名称 | 类型 | 属性 | 默认值 | 描述 ---|---|---|---|--- scope | Object | | null | 提供给 handler 参数的作用域 handler | function | | null | 执行函数 timeout | number | | 1000 | 时间(毫秒) params | * | 可选、可变参 | | 定时器接收的额外参数

实例:

const person = function(){this.name='小明'}
const doEat = function(...params){console.log(params[0], this.name);}
timeoutProvider.setTimeout(new person, doEat, 2000, 'hello')