qanimationframe
Version:
Promisified requestAnimationFrame with Q
131 lines (95 loc) • 5.21 kB
HTML
<html>
<head>
<title>qanimationframe.js</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, target-densitydpi=160dpi, initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
<link rel="stylesheet" media="all" href="docco.css" />
</head>
<body>
<div id="container">
<div id="background"></div>
<ul class="sections">
<li id="title">
<div class="annotation">
<h1>qanimationframe.js</h1>
</div>
</li>
<li id="section-1">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-1">¶</a>
</div>
</div>
<div class="content"><div class='highlight'><pre><span class="hljs-comment">/*
* Qanimationframe.js - Promisified requestAnimationFrame with Q
*/</span>
<span class="hljs-comment">/*jslint newcap: true */</span>
(<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(definition)</span> </span>{
<span class="hljs-keyword">if</span> (<span class="hljs-keyword">typeof</span> exports === <span class="hljs-string">"object"</span>) {
<span class="hljs-built_in">module</span>.exports = definition();
} <span class="hljs-keyword">else</span> {
<span class="hljs-built_in">window</span>.QanimationFrame = definition();
}
})(<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> </span>{
<span class="hljs-pi"> "use strict"</span>;</pre></div></div>
</li>
<li id="section-2">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-2">¶</a>
</div>
<p>Import Q</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">var</span> Q = <span class="hljs-built_in">window</span>.Q || <span class="hljs-built_in">require</span>(<span class="hljs-string">"q"</span>);</pre></div></div>
</li>
<li id="section-3">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-3">¶</a>
</div>
<p>requestAnimationFrame polyfill</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">var</span> requestAnimationFrame = (<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span></span>{
<span class="hljs-keyword">return</span> <span class="hljs-built_in">window</span>.requestAnimationFrame ||
<span class="hljs-built_in">window</span>.oRequestAnimationFrame ||
<span class="hljs-built_in">window</span>.msRequestAnimationFrame ||
<span class="hljs-built_in">window</span>.mozRequestAnimationFrame ||
<span class="hljs-built_in">window</span>.webkitRequestAnimationFrame ||
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(callback)</span> </span>{
<span class="hljs-built_in">window</span>.setTimeout(callback, <span class="hljs-number">1000</span> / <span class="hljs-number">60</span>);
};
})();</pre></div></div>
</li>
<li id="section-4">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-4">¶</a>
</div>
<h2 id="qanimationframe-f-function-promise-containing-the-return-value-of-f">QanimationFrame(f: function) => promise containing the return value of f</h2>
</div>
</li>
<li id="section-5">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-5">¶</a>
</div>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">var</span> QanimationFrame = <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(f)</span> </span>{
<span class="hljs-keyword">var</span> d = Q.defer();
requestAnimationFrame(<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> </span>{
<span class="hljs-keyword">try</span> {
d.resolve(f());
} <span class="hljs-keyword">catch</span> (e) {
d.reject(e);
}
});
<span class="hljs-keyword">return</span> d.promise;
};
<span class="hljs-keyword">return</span> QanimationFrame;
});</pre></div></div>
</li>
</ul>
</div>
</body>
</html>