Authored by 梁志锋

requestAnimationFrame

@@ -160,42 +160,48 @@ $header.on('touchstart', 'a', function() { @@ -160,42 +160,48 @@ $header.on('touchstart', 'a', function() {
160 $(this).removeClass('highlight'); 160 $(this).removeClass('highlight');
161 }); 161 });
162 162
163 -var lastTime = 0;  
164 -var prefixes = 'webkit moz ms o'.split(' '); 163 +(function() {
  164 + var lastTime = 0,
  165 + prefixes = 'webkit moz ms o'.split(' '),
  166 + requestAnimationFrame = window.requestAnimationFrame,
  167 + cancelAnimationFrame = window.cancelAnimationFrame,
  168 + prefix,
  169 + i;
  170 +
  171 + //通过遍历各浏览器前缀,来得到requestAnimationFrame和cancelAnimationFrame在当前浏览器的实现形式
  172 + for (i = 0; i < prefixes.length; i++) {
  173 + if (requestAnimationFrame && cancelAnimationFrame) {
  174 + break;
  175 + }
  176 + prefix = prefixes[i];
  177 + requestAnimationFrame = requestAnimationFrame || window[prefix + 'RequestAnimationFrame'];
  178 + cancelAnimationFrame = cancelAnimationFrame || window[prefix + 'CancelAnimationFrame'] ||
  179 + window[prefix + 'CancelRequestAnimationFrame'];
  180 + }
165 181
166 -var requestAnimationFrame = window.requestAnimationFrame;  
167 -var cancelAnimationFrame = window.cancelAnimationFrame; 182 + //如果当前浏览器不支持requestAnimationFrame和cancelAnimationFrame,则会退到setTimeout
  183 + if (!requestAnimationFrame || !cancelAnimationFrame) {
  184 + requestAnimationFrame = function(callback, element) {
  185 + var currTime = new Date().getTime();
168 186
169 -var prefix; 187 + //为了使setTimteout的尽可能的接近每秒60帧的效果
  188 + var timeToCall = Math.max(0, 16 - (currTime - lastTime));
  189 + var id = window.setTimeout(function() {
  190 + callback(currTime + timeToCall);
  191 + }, timeToCall);
170 192
171 -//通过遍历各浏览器前缀,来得到requestAnimationFrame和cancelAnimationFrame在当前浏览器的实现形式  
172 -for( var i = 0; i < prefixes.length; i++ ) {  
173 - if ( requestAnimationFrame && cancelAnimationFrame ) {  
174 - break; 193 + lastTime = currTime + timeToCall;
  194 + return id;
  195 + };
  196 +
  197 + cancelAnimationFrame = function(id) {
  198 + window.clearTimeout(id);
  199 + };
175 } 200 }
176 - prefix = prefixes[i];  
177 - requestAnimationFrame = requestAnimationFrame || window[ prefix + 'RequestAnimationFrame' ];  
178 - cancelAnimationFrame = cancelAnimationFrame || window[ prefix + 'CancelAnimationFrame' ] || window[ prefix + 'CancelRequestAnimationFrame' ];  
179 -}  
180 201
181 -//如果当前浏览器不支持requestAnimationFrame和cancelAnimationFrame,则会退到setTimeout  
182 -if ( !requestAnimationFrame || !cancelAnimationFrame ) {  
183 - requestAnimationFrame = function( callback, element ) {  
184 - var currTime = new Date().getTime();  
185 -  
186 - //为了使setTimteout的尽可能的接近每秒60帧的效果  
187 - var timeToCall = Math.max( 0, 16 - ( currTime - lastTime ) );  
188 - var id = window.setTimeout( function() {  
189 - callback( currTime + timeToCall );  
190 - }, timeToCall );  
191 - lastTime = currTime + timeToCall;  
192 - return id;  
193 - };  
194 -  
195 - cancelAnimationFrame = function( id ) {  
196 - window.clearTimeout( id );  
197 - };  
198 -} 202 + window.requestAnimationFrame = requestAnimationFrame;
  203 + window.cancelAnimationFrame = cancelAnimationFrame;
  204 +}());
199 205
200 //暴露公共接口 206 //暴露公共接口
201 window.cookie = cookie; 207 window.cookie = cookie;
@@ -209,7 +215,3 @@ window.getUid = getUid; @@ -209,7 +215,3 @@ window.getUid = getUid;
209 window.getShoppingKey = getShoppingKey; 215 window.getShoppingKey = getShoppingKey;
210 216
211 window.rePosFooter = rePosFooter; 217 window.rePosFooter = rePosFooter;
212 -  
213 -window.requestAnimationFrame = requestAnimationFrame;  
214 -  
215 -window.cancelAnimationFrame = cancelAnimationFrame;