JQuery - при вызове функции несколько раз подряд, почему только обратный вызов последнего вызова выполняется правильно? - PullRequest
Новая
       38

JQuery - при вызове функции несколько раз подряд, почему только обратный вызов последнего вызова выполняется правильно?

3 голосов
/ 26 мая 2011
  1. Существует функция, которая запускает обратный вызов по окончании;
  2. Я вызываю эту функцию 2 или 3 раза подряд;
  3. Только обратный вызов последнего вызова делает то, что ожидалось;

Следующее описание и код иллюстрируют истинный сценарий.

У меня есть три пары div.Мне нужно переключить один div каждой пары и изменить состояние оставшихся видимых div, когда их пара больше не видна.

Затем я сделал функцию, чтобы скрыть div и изменить цвет фона другого,Я сделал это, потому что хотел бы вызывать эту функцию всякий раз, когда пользователь нажимает кнопку, чтобы показать описание и другие несущественные элементы.

К сожалению, результат не тот, который я ожидал.Если пользователь вызывает функцию несколько раз, не позволяя функции завершить свою задачу, только последний связанный обратный вызов будет работать правильно, остальные не изменят цвет фона элемента div или будут не синхронизированыс другим div из-за задержки.

Вот javascript: 

function toggleLayer(layerId,layerId2) {
    //element1 is the first div of the pair. The one to be hidden.
    element1 = $("#"+layerId);
    //element2 is the second div of the pair. The background-color of this one will be changed when the element1 is hidden.
    element2 = $("#"+layerId2);

    //Hiding the first div
    element1.toggle("slow",function() {
        //Changing the color of the second div
        element2.toggleClass("blue");
    });
}

Вот полный HTML, просто скопируйте и вставьте для проверки: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
<!--

    function toggleLayer(layerId,layerId2) {
        //element1 is the first div of the pair. The one to be hidden.
        element1 = $("#"+layerId);
        //element2 is the second div of the pair. The background-color of this one will be changed when the element1 is hidden.
        element2 = $("#"+layerId2);

        //Hiding the first div
        element1.toggle("slow",function() {
            //Changing the color of the second div
            element2.toggleClass("blue");
        });
    }

-->
</script>
<style type="text/css">
    div{
        width:100px;height:300px;background-color:red;float:left;
    }
    .blue {
        background-color: blue !important;
    }
</style>
</head>
<body>

<div id="d1"></div>
<div id="d11"></div>
<div id="d2"></div>
<div id="d22"></div>
<div id="d3"></div>
<div id="d33"></div>



<input type="button" onclick="toggleLayer('d1','d11');" value="1" style="clear:both;float:left;" />
<input type="button" onclick="toggleLayer('d2','d22');" value="2" style="clear:both;float:left;" />
<input type="button" onclick="toggleLayer('d3','d33');" value="3" style="clear:both;float:left;" />
<input type="button" onclick="toggleLayer('d1','d11');toggleLayer('d2','d22');" value="1+2" style="clear:both;float:left;" />
<input type="button" onclick="toggleLayer('d1','d11');toggleLayer('d2','d22');toggleLayer('d3','d33');" value="1+2+3" style="clear:both;float:left;" />

</body>
</html>

Я ожидал, что обратный вызов завершит свою задачу, прежде чем пытаться выполнить следующий вызов, но кажется, что браузер пытается выполнить их все одновременно.Почему это происходит и как мне это сделать правильно?

1 Ответ

5 голосов
/ 26 мая 2011 
    element1 = $("#"+layerId);
    element2 = $("#"+layerId2);

Вы забыли объявить эти переменные var, поэтому вместо локальных функций они являются случайными глобальными переменными. Когда функция вызывается во второй раз, она перезаписывает значения первого вызова element1 / element2, поэтому, когда происходит обратный вызов element2 не то, что вы ожидаете.

...