4d 中文文档教程

Question

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 === 四维=== t)

Compatibility

4d 至少兼容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]

[点击这里可以看到演示]()

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:

cancelAnimationFrame 最全面的polyfill。cancel( ) 避免更改本机对象以防止覆盖可能在其他库中使用的 cancelAnimationFrame 实现。

cancel() 取消先前通过调用 request() 或window.requestAnimationFrame()。

Usage:

import { cancel } from '4d'

// id === some requestAnimationFrame ID.

cancel(id)

参见更多。

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:

最全 requestAnimationFrame 的 sive polyfill。 request() 避免本机对象的突变，以防止覆盖可能在其他库中使用的 requestAnimationFrame 实现。

request() 告诉浏览器您希望执行动画并请求浏览器在下一次重绘之前调用指定的函数来更新动画。 该方法将在重绘之前调用的回调作为参数。

Usage:

import { request } from '4d'

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

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

查看更多。

Browser Support:

• Internet Explorer 5+
• See more

Core library:

请求框架。

---

---

MIT

版权所有 (c) 2016 Julien Etienne