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) 时，函数的第一个 if 语句起作用，但函数“else”部分中的 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);
        }
    }

我想知道这是否是因为我没有通过函数前半部分 (if) 的 return 返回更改后的状态 (eMainIllustration)。这是正确的吗？我将如何实现这一目标？

最好的，

Answer 1

如果您在函数内使用 Alert 或 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 2

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

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

如果将其移至 body 标记上方，则该变量将被填充，因为 dom 将在 javascript 加载时完全加载。

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

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

---

编辑

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

Answer 3

我明白了这一点。

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

pixastic Blufast（&blur）插件“恢复功能”只是将元素恢复到其原始状态。换句话说，您不是添加另一个效果，而是告诉 pixastic 取消所有更改和更改。将元素替换为其原始状态。

请记住，添加像素效果后，图像不再是图像，而是 HTML5 画布元素，在这种情况下，该元素将被取消，原始“图像”将放回原处。

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

希望这对某人有帮助。