Javascript - 全球与本地变量之间的混淆

Question

EDIT2：这是控制台日志。图像正在转换为画布（HTML5），我需要以某种方式将其返回给全局变量。建议？

<img id="mainIllustration" alt="main illustration" src="Img/Model01.png"> 
Illust...o_03.js (line 24) 
<canvas id="mainIllustration" class="" width="278" height="659" style="" title="" tabindex="-1"> 
Illust...o_03.js (line 32) 
<img id="mainIllustration" alt="main illustration" src="Img/Model01.png"> 
Illust...o_03.js (line 24) 
<canvas id="mainIllustration" class="" width="278" height="659" style="" title="" tabindex="-1"> 
Illust...o_03.js (line 32) 
<img id="mainIllustration" alt="main illustration" src="Img/Model01.png"> 
Illust...o_03.js (line 24) 
<canvas id="mainIllustration" class="" width="278" height="659" style="" title="" tabindex="-1"> 

编辑1：我开始不知道这个问题是否与Pixastic，但事实上，它操纵的形象，这是我必须要返回到全局变量图像（eMainIllustration）。我将如何实现这一目标？

原始消息：

所有，

进出口使用pixastic库和我变得非常由一个看似很简单的事情，全局/局部变量混淆。

我有以下两组代码，其中一个变量是全局定义的（最终是我想要的）&另一个变量是局部定义的。

下面的第一个代码正常工作，变量（eMainIllustration）是本地定义的，并且该函数运行良好。

var eDisplayTableSlideState = false; 
    function displayTableSlideIn() 
    { 
// eMainIllustration is locally defined 
     var eMainIllustration = document.getElementById("mainIllustration"); 
     if (eDisplayTableSlideState === false) 
     { 
      $("#displayTable").animate ({top: "-=33px", left: "+=66px", width: "-=198px", height: "-=48px"}, 750, "swing",function() 
      { 
       Pixastic.process (eMainIllustration,"blurfast", {amount: 0.1}); 
      return (eDisplayTableSlideState = true); 
     } else 
     { 
      $("#displayTable").animate ({top: "+=33px", left: "-=66px", width: "+=198px", height: "+=48px"}, 500, "swing",function() 
      { 
       Pixastic.revert(eMainIllustration); 
      }); 
      return (eDisplayTableSlideState = false); 
     } 
    } 

然而，当我设置变量（eMainIllustration）全球范围内，如果函数的声明工程第一，但是在功能上的“其他”部分pixastic.revert代码没有。为什么？

// eMainIllustration is locally defined 
var eMainIllustration = document.getElementById("mainIllustration"); 
    var eDisplayTableSlideState = false; 
    function displayTableSlideIn() 
    { 
     if (eDisplayTableSlideState === false) 
     { 
      $("#displayTable").animate ({top: "-=33px", left: "+=66px", width: "-=198px", height: "-=48px"}, 750, "swing",function() 
      { 
       Pixastic.process (eMainIllustration,"blurfast", {amount: 0.1}); 
      return (eDisplayTableSlideState = true); 
     } else 
     { 
      $("#displayTable").animate ({top: "+=33px", left: "-=66px", width: "+=198px", height: "+=48px"}, 500, "swing",function() 
      { 
       Pixastic.revert(eMainIllustration); 
      }); 
      return (eDisplayTableSlideState = false); 
     } 
    } 

我不知道这是因为我没有在功能上半年（如有），通过返回返回改变（eMainIllustration）的状态。那是对的吗？我将如何实现这一目标？

最好，

Answer 1

我想通了这一点。

如果有人对Pixastic的工作方式有任何疑惑，这里是我的理解，以及我的问题的解决方案。

像素模糊（&模糊）插件'恢复功能'只是将元素恢复到其原始状态。换句话说，您并未添加其他效果，而是告诉pixastic取消所有更改&将元素替换为其原始状态。

请注意，当添加pixastic效果时，图像不再是图像，而是HTML5画布元素，在这种情况下，该元素将被取消并且原始“图像”被放回原位。

全局变量&局部变量问题通过在函数结尾处使用'return'来解决。实际上，这部分不是真正的问题，问题在于我（错误地）试图实现的恢复实现。

希望这可以帮助别人。

Answer 2

如果你警告或console.log函数内的变量出了什么情况会怎么样？有我用定义全局变量使用函数的问题。

我要去的地方在于DOM可能没有准备好。尝试使用：

if(window.addEventListener) { 
    window.addEventListener('DOMContentLoaded', function() { 
     //DOM is now ready. Set your global variables value here. 
    }); 
} else { 
    //If internet explorer, use attachEvent method. 
} 

Answer 3

这可能是由于您的Javascript在页面上的位置。

如果您在页面的顶部，那么mainIllustration dom元素可能在加载javascript之前未加载。

如果将它移动到正文标签的上方，那么该变量将被填充，因为dom将在javascript加载时完全加载。

因此，它在函数内部工作，因为在调用函数之前加载了dom，但如果它在函数外部则不起作用。

var eMainIllustration = document.getElementById("mainIllustration"); 

---

编辑

<script type="text/javascript"> 
    $(document).ready(function() { 
     load("path_to_javasript"); 
    }); 
</script>