4d

### Performance Timing Functions for UI Development

4d

4d is a set of efficient timing functions. Click below for documentation.

• cancel
• debounce
• interval
• once
• request
• requestNative
• throttle
• timeout
• windowResize

Why?

• Better performance for modern browsers and mobile devices.
• Features a comprehensive fix for legacy compatibility issues with RAF.
• Avoids setTimeout and setInterval unlike the majority of JavaScript timing functions.
• Prioritise timing for browsers and mobile devices over node.
• Limit function calls, set FPS, delay and loop to the next frame to be rendered.
• Features a comprehensive windowResize method that resolves mobile issues.
• Features a media queries detection API with built in custom events (Coming soon)
• Ability to mock jittery/ random function calls e.g. emulate bad performance. (coming soon)
• Less than 2kb gzip size (will never exceed a 4kb gzip size)

Aim

• 4d is a tiny powerhouse, and will remain tiny.
• 4d aims to improve common timing requirements in a clean, lightweight and modular way.
• 4d aims to provide a better feature implementations than alternatives.

(4d === fourth dimension === t)

Compatibility

4d Is at least compatible with IE8 +

Support

• CommonJS ...

require('4d')

• AMD ...

define(['$4d'] , function ($4d) {...

• ES6 ...

import {debounce, throttle, timeout } from '4d'

• IIFE ...

src="4d.js'

Demo

• [Most 4d functions will only work in browser environments, not Node or the Dev Tools console]

Click here to see the demo

The 4d API

cancel()

Syntax:

cancel(requestID)

Parameters:

• requestID: The ID value returned by the call to window.requestAnimationFrame() that requested the callback.

In place of:

window.cancelAnimationFrame()

Summary:

The most comprehensive polyfill for cancelAnimationFrame. cancel() avoids mutation of the native object to prevent overriding of cancelAnimationFrame implementations that may be used within other libraries.

cancel() cancels an animation frame request previously scheduled through a call to request() or window.requestAnimationFrame().

Usage:

import { cancel } from '4d'

// id === some requestAnimationFrame ID.

cancel(id)

See more.

Browser Support:

• Internet Explorer 5+
• See more

Core library:

Request Frame.

---

---

request()

Syntax:

request(callback[DOMHighResTimeStamp])

Parameters:

• callback: A parameter specifying a function to call when it's time to update your animation for the next repaint. The callback has one single argument, a DOMHighResTimeStamp, which indicates the current time (the time returned from Performance.now() ) for when requestAnimationFrame starts to fire callbacks.

In place of:

window.requestAnimationFrame(callback[DOMHighResTimeStamp])

Summary:

The most comprehensive polyfill for requestAnimationFrame. request() avoids mutation of the native object to prevent overriding of requestAnimationFrame implementations that may be used within other libraries.

request() tells the browser that you wish to perform an animation and requests that the browser call a specified function to update an animation before the next repaint. The method takes as an argument a callback to be invoked before the repaint.

Usage:

import { request } from '4d'

// Animate.
const animate = (highResTimestamp) => {
  request(animate);
  // Animate something...
}

// Start the animation on the next available frame.
request(animate);

See more.

Browser Support:

• Internet Explorer 5+
• See more

Core library:

Request Frame.

---

---

MIT

Copyright (c) 2016 Julien Etienne