0.4.0 • Published 7 years ago
fast-timer v0.4.0
timer
可复用定时器,可用于限制邮件短信发送
Online demo: https://fast-flow.github.io/timer/
Features
- React
- DOM function
- Cache second (localStorage or cookie)
- DIY
npm install fast-timer --save
.m-btn {
background-color: #999;border:none;
}
html .m-btn--timing {
background-color: #eee;
}
fast-timer/react
fast-timer/btn
Send
var timerBtn = require('fast-timer/lib/btn')
var btn = document.getElementById('btn')
var btnSendAjax = false
timerBtn(btn, {
sec: 5,
// cache: refresh page auto start | 缓存: 刷新页面自动开始计时
cache: 'some242358',
timingClass: 'm-btn--timing',
trigger: function (start) {
console.log('btn trigger')
if (btnSendAjax) {
return
}
else {
btnSendAjax = true
}
// mock send ajax timeout
setTimeout(function () {
console.log('btn start')
btnSendAjax = false
start()
}, 1000)
},
watch: function (date) {
if (date.sec) {
return date.sec + 's'
}
else {
return 'Resend'
}
}
})
click
DIY | 使用API定制开发
simple
var Timer = require('fast-timer')
var time = new Timer()
var demo = document.getElementById('demo')
// 定时回调
time.watch(function (date) {
console.log('second:' + date.sec)
console.log('free:' + time.free)
if (date.sec === 0) {
demo.innerHTML = 'done'
}
else {
demo.innerHTML = date.sec
}
})
demo.onclick = function (){
if (time.free) {
time.start(10)
}
}
cache
cache
var Timer = require('fast-timer')
var time = new Timer({
cache: 'abc'
})
var cacheBtn = document.getElementById('cacheBtn')
if (time.cacheSec()) {
time.start(time.cacheSec())
cacheBtn.innerHTML = time.cacheSec()
}
time.watch(function (date) {
console.log('second:' + date.sec)
console.log('free:' + time.free)
if (date.sec === 0) {
cacheBtn.innerHTML = 'done'
}
else {
cacheBtn.innerHTML = date.sec
}
})
cacheBtn.onclick = function () {
if (time.free) {
time.start(10)
}
}
React - simple
var Timer = require('fast-timer')
var React = require('react')
var ReactDOM = require('react-dom')
var App = React.createClass({
getInitialState: function () {
return {
sec: 0
}
},
componentWillMount: function () {
var self = this
self.time = new Timer()
self.time.watch(function (date) {
self.setState({
sec: date.sec
})
})
},
startTimer: function () {
if (this.time.free) {
this.time.start(this.props.sec)
}
},
render: function () {
return (
<button onClick={this.startTimer}>
{this.state.sec?this.state.sec:'click'}
</button>
)
}
})
ReactDOM.render(<App sec={10} />, document.getElementById('react1'))
React - cache
var Timer = require('fast-timer')
var React = require('react')
var ReactDOM = require('react-dom')
var App = React.createClass({
getInitialState: function () {
return {
sec: 0
}
},
componentWillMount: function () {
var self = this
self.time = new Timer({
cache: 'abc'
})
self.time.watch(function (date) {
self.setState({
sec: date.sec
})
})
if (self.time.cacheSec()) {
self.time.start(self.time.cacheSec())
}
},
startTimer: function () {
if (this.time.free) {
this.time.start(this.props.sec)
}
},
render: function () {
return (
<button onClick={this.startTimer}>
{this.state.sec?this.state.sec:'click'}
</button>
)
}
})
ReactDOM.render(<App sec={10} />, document.getElementById('reactCache'))
development | 参与开发
git clone
cd timer
npm run update
npm run dev
npm run s