我是相对较新的javascript，但是我对其他语言很满意。我正在尝试使用Greensock时间轴来构建模块化序列，以减少代码重复。我正在尝试让所有功能都可以访问的单例时间轴。我尝试只使用全局变量并将其附加到（）方法。在chrome和iexplorer中有效，但在Firefox中无效。我在Firefox错误控制台中收到“ this.timeline为null”错误。然后我尝试了这个：
var TL = (function() {
var tl = new TimelineMax();
function returnInstance() {
return tl;
}
return {
inst: function() {
return returnInstance();
}
}
})();
这使我成为想要的单身人士，但仅在FF中得到相同的错误。以下代码在chrome和iexplorer中都可以正常运行：
dev.html：
<html>
<body>
<-- Page content... -->
<script type='text/javascript' src='js/jquery.js'></script>
<script type='text/javascript' src='js/TweenMax.min.js'></script>
<script type='text/javascript' src='js/foo.js'></script>
<script type='text/javascript'>
$(document).ready(function(){
init();
});
</script>
</body>
</html>
foo.js：
//...singleton code from above...
function init(){
do1();
do2(-2);
}
do1(delay){
delay = delay || 0;
var gTL = TL.inst();
gTL.to($("#bar"),2,{css:{autoAlpha:1}},delay);
}
do2(delay){
delay = delay || 0;
var gTL = TL.inst();
gTL.to($("#canv"),2,{css:{autoAlpha:1}},delay);
}
因此，这将使#bar和#canv同时进入（如果我调用do2（0）；那么#canv将在#bar完成后进入）。
您对我在做什么错有什么见解，或者说为什么FF为什么以不同的方式处理代码？
谢谢你的帮助。
编辑1
浏览器版本：
铬（19.0.1084.56）
Internet Explorer（9.0.8112.16421）
火狐（13.0）
编辑2
该错误从TweenMax.min.js文件内部生成。
编辑3
在尝试使用全局时间轴和单例之前，我通过将TimelineMax引用传递给每个函数并返回更新的TimelineMax来实现所需的功能。因此，我的代码看起来像这样：
foo.js
function init() {
var tl = new TimelineMax();
tl = do1(tl);
tl = do2(tl);
}
do1(TL){
TL.to(...);
return TL;
}
do2(TL){
TL.to(...);
return TL;
}
这似乎在Firefox中可以正常工作，但是与时间轴对象一起播放烫手山芋则有些繁琐。那是首选方法吗？在哪里可以找到格式正确的JavaScript编码标准和最佳做法？
编辑4
这是完整的无效代码。它在chrome和IE中都可以正常工作，但是我收到来自TweenMax.js库的FF错误。
dev_page2.html：
<!DOCTYPE HTML>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" >
<link rel="stylesheet" type="text/css" href="css/dev.css">
<!--[if lt IE 7]>
<style media="screen" type="text/css">
#main {
height:100%;
}
</style>
<![endif]-->
</head>
<body class="whiteBG">
<header class="center">
<div id="bar" class="invisible">
<nav>
<!-- nav elements here... -->
</nav><!-- nav -->
</div><!-- bar -->
<canvas id="ani" class='invisible center' width='840' height='420'></canvas>
</header><!-- End header -->
<section id="main">
<div id="content" class="center">
<p>
</p><blockquote>
</blockquote><p class="signature">
</p><p class="float-left">
</p><p class="float-left">
</p>
</div> <!-- End content -->
</section>
<footer class="invisible center">
<div id="footerLeft">
</div>
<div id="footerCenter">
</div>
<div id="footerRight">
</div>
</footer><!-- End footer -->
<script type="text/javascript" src="js/Jquery.js">
</script>
<script type="text/javascript" src="js/TweenMax.js"></script>
<script type="text/javascript" src="js/dev2.js"></script>
<script type="text/javascript">
$(document).ready(function() {
init();
});
</script>
</body>
</html>
dev2.js：
// Copyright 2012 Gray Designs. All Rights Reserved.
/*
* @author [email protected] (Rocky Gray)
* @date May 13, 2012
*/
function init()
{
enterNavBar();
drawCanvas();
enterCanvas(-2);
enterFooter(-1);
}
var TL = (function() {
var tl = new TimelineMax();
function returnInstance() {
return tl;
}
return {
inst: function() {
return returnInstance();
}
}
})();
function enterNavBar(delay)
{
delay = delay || 0;
var gTL = TL.inst();
//nav bar fade in
gTL.to($("#bar"),2,{css:{autoAlpha:1},ease:Quad.easeIn,onComplete:function(){
$("#bar").removeClass('invisible');
}},delay);
}
function enterCanvas(delay)
{
delay = delay || 0;
var gTL = TL.inst();
gTL.to($("#ani"),2,{css:{autoAlpha:1},ease:Quad.easeIn,onComplete:function(){
$("#ani").removeClass('invisible');
}},delay);
}
function enterFooter(delay)
{
delay = delay || 0;
var gTL = TL.inst();
//nav bar fade in
gTL.to($("footer"),2,{css:{autoAlpha:1},ease:Quad.easeIn,onComplete:function(){
$("footer").removeClass('invisible');
}},delay)
}
function drawCanvas()
{
//var canv = document.getElementById("ani");
var $canv = $('#ani');
var ctx = $canv[0].getContext("2d");
ctx.fillStyle="#000";
ctx.fillRect(0,0,840, 420,0);
}
最佳答案
听起来您可能正在使用GreenSock文件的过时版本。这听起来像是一个非常罕见的问题，并且已在较新的版本中修复（对于任何麻烦，我深表歉意）。您介意下载最新版本并重试吗？ http://www.greensock.com/v12/
关于javascript - Greensock TimelineMax Javascript Singleton在Firefox中有所不同，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/11041425/