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 функции работает, однако, код pixastic.revert в части else не делает этого.Почему?

// 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) через return в первой половине (если) функции.Это верно?И как бы мне этого добиться?

Best,

Answer 1

Вероятно, это связано с расположением вашего Javascript на странице.

Если он находится в верхней части вашей страницы, то элемент mainIllustration dom может не загружаться до загрузки javascript.

Если вы поместите его чуть выше тега body, то переменная будет заполнена, поскольку dom будет полностью загружен к моменту загрузки JavaScript.

Таким образом, он работает, когда внутри функции загружается dom перед вызовом функции, но не работает, если он находится вне функции.

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

---

Редактировать

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

Answer 2

Я понял это.

В случае, если у кого-то возникнет путаница в том, как работает Pixastic, вот что я понимаю вместе с решением моей проблемы.

Pixastic blurfast (&blur) плагин 'revert function' просто возвращает элемент обратно в исходное состояние.Другими словами, вы не добавляете другой эффект, а говорите pixastic, чтобы отменить все изменения и заменить элемент его первоначальным состоянием.

Имейте в виду, что при добавлении пиксельного эффекта изображение больше не будетimage, но элемент HTML5 canvas, который в данном случае отменяется, а исходное «изображение» возвращается на место.

Проблема глобальной переменной и локальной переменной решена с помощью оператора return наконец функции.На самом деле, эта часть не была реальной проблемой, проблема была в реализации возврата, которую я (ошибочно) пытался реализовать.

Надеюсь, это кому-то поможет.

Answer 3

Что произойдет, если вы оповестите или 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.
}