我正在使用nodeJs和webpack来构建客户端应用程序。我已经构建了一个模块'animationFrame.js',它根据this文章导出requestAnimationFrame。
exports.requestAnimationFrame = window.requestAnimationFrame
|| window.mozRequestAnimationFrame
|| window.webkitRequestAnimationFrame
|| window.msRequestAnimationFrame
|| function(f){return setTimeout(f, 1000/60)} // simulate calling code 60
exports.cancelAnimationFrame = window.cancelAnimationFrame
|| window.mozCancelAnimationFrame
|| function(requestID){clearTimeout(requestID)} //fall back
我正在使用回调来等待生成的div被渲染,以便可以根据回调方法返回的数据更新它。
function mycallback(id, data){
let sel = $('div.'+id);
if(!sel.size()){ // wait until element is ready
animation.requestAnimationFrame(function(){
mycallback(id, data);
});
} else {
if(data == null) $('div.'+id).remove();
else if(data && data.Title) sel.text(data.Title);
else sel.text('No Data');
}
}
但是,在调用animation.requestAnimationFrame
时,我收到了非法的调用错误。如何使函数模块化以抽象功能?
更多的搜索表明这是一个范围问题。我能够通过使用bind()
改变我的模块来使其工作。
exports.requestAnimationFrame = window.requestAnimationFrame.bind(window)
|| window.mozRequestAnimationFrame.bind(window)
|| window.webkitRequestAnimationFrame.bind(window)
|| window.msRequestAnimationFrame.bind(window)
|| function(f){return setTimeout(f, 1000/60)} // simulate calling code 60
exports.cancelAnimationFrame = window.cancelAnimationFrame.bind(window)
|| window.mozCancelAnimationFrame.bind(window)
|| function(requestID){clearTimeout(requestID)} //fall back