const { moment, PIXI, PropTypes, React, ReactDOM } = window
const { Component, Fragment } = React
const { render } = ReactDOM
const { Application, Rectangle, Sprite } = PIXI
const rootNode = document.getElementById('app')
const BLOB_SIZE = 40
const DEBOUNCE = 'DEBOUNCE'
const THROTTLE = 'THROTTLE'
const TIME_FORMAT = 'hh:mm:ss'
const TIME_BASE = moment().format(TIME_FORMAT)
/**
* debounce function
* use inDebounce to maintain internal reference of timeout to clear
*/
const debounce = (func, delay) => {
let inDebounce
return function() {
const context = this
const args = arguments
clearTimeout(inDebounce)
inDebounce = setTimeout(() => func.apply(context, args), delay)
}
}
/**
* throttle function that catches and triggers last invocation
* use time to see if there is a last invocation
*/
const throttle = (func, limit) => {
let lastFunc
let lastRan
return function() {
const context = this
const args = arguments
if (!lastRan) {
func.apply(context, args)
lastRan = Date.now()
} else {
clearTimeout(lastFunc)
lastFunc = setTimeout(function() {
if (Date.now() - lastRan >= limit) {
func.apply(context, args)
lastRan = Date.now()
}
}, limit - (Date.now() - lastRan))
}
}
}
const getShape = (size, isDiamond) => {
const d = document.createElement('canvas')
const c = d.getContext('2d')
const side = Math.sqrt((size * size) / 2)
d.height = size
d.width = size
c.fillStyle = '#ffffff'
if (isDiamond) {
c.translate(size / 2, 0)
c.rotate((45 * Math.PI) / 180)
c.fillRect(0, 0, side, side)
} else {
c.arc(size / 2, size / 2, size / 2, 0, 2 * Math.PI)
c.fill()
}
return d
}
const Circle = getShape(BLOB_SIZE)
const Diamond = getShape(BLOB_SIZE, true)
class Timeline extends Component {
state = {
blobs: [],
}
static defaultProps = {
blobSize: BLOB_SIZE,
height: innerHeight,
debounceColor: 0x4ecdc4,
throttleColor: 0xf64747,
blobOpacity: 0.75,
onBlobSelect: () => {},
}
static propTypes = {
blobSize: PropTypes.number,
height: PropTypes.number,
debounceColor: PropTypes.number,
throttleColor: PropTypes.number,
blobOpacity: PropTypes.number,
onBlobSelect: PropTypes.func,
}
onTick = () => {
const {
App,
BlobContainer,
BlobTwoContainer,
state: { blobs },
props: { blobSize },
} = this
if (!blobs || !blobs.length) return
if (
App.renderer.width !== innerWidth ||
App.renderer.height !== innerHeight
) {
App.renderer.resize(innerWidth, innerHeight)
BlobContainer.removeChildren()
BlobTwoContainer.removeChildren()
this.setState({ blobs: [] })
} else {
for (const blob of blobs) {
if (blob.active) {
blob.x += 1
blob.hitArea = new Rectangle(blob.x, blob.y, blobSize, blobSize)
}
if (blob.x > innerWidth) {
blob.active = false
blob.x = -blobSize
blob.data.fresh = false
}
}
}
}
getBlob = isDebounce => {
const {
createBlob,
state: { blobs },
} = this
// Either generate a new blob or return one from state 👍
const available = blobs.find(
b => !b.active && (isDebounce ? b.type === DEBOUNCE : b.type === THROTTLE)
)
if (available) {
available.active = true
return available
} else {
return createBlob(isDebounce)
}
}
createBlob = isDebounce => {
const {
BlobContainer,
BlobTwoContainer,
props: { blobSize, debounceColor, height, throttleColor },
} = this
const Blob = new Sprite.from(isDebounce ? Circle : Diamond)
const y = Math.floor(Math.random() * (height - blobSize))
Blob.active = true
Blob.x = -blobSize
Blob.y = y
Blob.tint = isDebounce ? debounceColor : throttleColor
Blob.alpha = 1
Blob.data = {
fresh: true,
born: new Date().getTime(),
type: isDebounce ? DEBOUNCE : THROTTLE,
}
if (isDebounce) BlobContainer.addChild(Blob)
else BlobTwoContainer.addChild(Blob)
return Blob
}
showBlob = isDebounce => {
const {
getBlob,
state: { blobs: oldBlobs },
} = this
const newBlob = getBlob(isDebounce)
const blobs = newBlob.data.fresh
? [...oldBlobs, newBlob]
: oldBlobs.map(b => (b.data.born === newBlob.data.born ? newBlob : b))
this.setState({ blobs })
}
createBlobContainer = () => {
const Container = new PIXI.particles.ParticleContainer(10000, {
scale: true,
position: true,
alpha: true,
})
return Container
}
createPixiApp = () => {
const {
VIEW: view,
props: { height },
} = this
const App = new Application({
antialias: true,
height,
transparent: true,
view,
width: innerWidth,
})
return App
}
componentDidMount = () => {
const { createBlobContainer, createPixiApp, onTick } = this
const App = (this.App = createPixiApp())
const BlobContainer = (this.BlobContainer = createBlobContainer())
const BlobTwoContainer = (this.BlobTwoContainer = createBlobContainer())
App.stage.addChild(BlobContainer)
App.stage.addChild(BlobTwoContainer)
App.ticker.add(onTick)
}
render = () => {
return <canvas ref={view => (this.VIEW = view)} />
}
}
class App extends Component {
state = {
time: TIME_BASE,
debounceRate: 2000,
throttleRate: 1000,
showInfo: true,
}
showBlob = isDebounce => {
return () => {
this.TIMELINE.showBlob(isDebounce)
}
}
tick = () => {
this.setState({
time: moment().format(TIME_FORMAT),
})
}
showThrottle = throttle(this.showBlob(), this.state.throttleRate)
showDebounce = debounce(this.showBlob(true), this.state.debounceRate)
componentDidMount = () => {
window.addEventListener('mousemove', this.showDebounce)
window.addEventListener('mousemove', this.showThrottle)
window.addEventListener('touchmove', this.showDebounce)
window.addEventListener('touchmove', this.showThrottle)
this.INTERVAL = setInterval(this.tick, 1000)
}
componentWillUnmount = () => {
window.removeEventListener('mousemove', this.showDebounce)
window.removeEventListener('mousemove', this.showThrottle)
window.removeEventListener('touchmove', this.showDebounce)
window.removeEventListener('touchmove', this.showThrottle)
clearInterval(this.INTERVAL)
}
updateHandlers = debounce(() => {
const {
state: { debounceRate, throttleRate },
} = this
window.removeEventListener('mousemove', this.showDebounce)
window.removeEventListener('mousemove', this.showThrottle)
window.removeEventListener('touchmove', this.showDebounce)
window.removeEventListener('touchmove', this.showThrottle)
this.showThrottle = throttle(this.showBlob(), throttleRate)
this.showDebounce = debounce(this.showBlob(true), debounceRate)
window.addEventListener('mousemove', this.showDebounce)
window.addEventListener('mousemove', this.showThrottle)
window.addEventListener('touchmove', this.showDebounce)
window.addEventListener('touchmove', this.showThrottle)
}, 500)
onOptionChange = e => {
e.persist()
const newState = {}
newState[e.target.name] = e.target.value
this.setState(newState, () => this.updateHandlers(e.target.value))
}
discardIntro = () => {
this.setState({ showInfo: false })
}
render = () => {
const {
discardIntro,
onOptionChange,
state: { debounceRate, showInfo, throttleRate, time },
} = this
return (
<Fragment>
{showInfo && (
<div className="show-info">
<h2>What's happening here?</h2>
<p>
This demo is visualising when throttled and debounced functions
are fired.
</p>
<p>
We are throttling and debouncing <code>mousemove</code> and{' '}
<code>touchmove</code> event handling on <code>window</code>. Move
your mouse or finger around to start throttling and debouncing an
event handler. Throttled function calls are represented by a red
diamond. A debounced function call is represented by a green
circle.
</p>
<p>
You can read about throttling and debouncing in this post:{' '}
<a
rel="noopener noreferrer"
target="_blank"
href="https://codeburst.io/throttling-and-debouncing-in-javascript-b01cad5c8edf">
Throttling and Debouncing in JavaScript
</a>
</p>
<button onClick={discardIntro}>Got it! 👍</button>
</div>
)}
<div className="timeline__container">
<div className="time">{time}</div>
<Timeline ref={timeline => (this.TIMELINE = timeline)} />
</div>
<div className="actions">
<label>{`Debounce for ${debounceRate}ms`}</label>
<input
type="range"
min="50"
max="10000"
step="50"
name="debounceRate"
onChange={onOptionChange}
value={debounceRate}
/>
<label>{`Throttle every ${throttleRate}ms`}</label>
<input
type="range"
min="50"
max="10000"
step="50"
name="throttleRate"
onChange={onOptionChange}
value={throttleRate}
/>
</div>
</Fragment>
)
}
}
render(<App />, rootNode)
!
