повторный вызов setTimeout останавливает первый экземпляр

StackOverflow https://stackoverflow.com/questions/1174423

  •  19-09-2019
  •  | 
  •  

Вопрос

У меня есть маленькая тривиальная игра, которую я написал на javascript, которая создает волну там, где вы нажимаете.Я придумал два способа заставить "волну" перемещаться по экрану:

  1. вызывая jQuery.animate() со все более большими временными интервалами. ДЕМОНСТРАЦИЯ
  2. путем повторного вызова setTimeout. ДЕМОНСТРАЦИЯ

Проблема, с которой я сталкиваюсь, заключается в том, что я хочу поведение 2 (все столбцы растут с одинаковой скоростью со смещением по времени), но с действием 1 (последующий щелчок объединяет сформированные "волны").

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

Вы можете просмотреть исходный код любой из этих страниц, чтобы увидеть код (методы getMouseXYUp и getMouseXYDown).

основная суть того, что я делаю во второй демонстрации, заключается в этих двух функциях:

function getMouseXYUp(e) {
            $("body").die('mousemove');

            h = (document.height - e.pageY + 17);
                left = id-1;
                right = id+1;
            setTimeout("moveleft()", 100);
            setTimeout("moveright()", 100);

            return true
        }

function moveleft(){
        if (left >= 0){
            $("#div"+left).animate({'height': h}, 400);
            left--;
            setTimeout("moveleft()", 50);
        }
    }
Это было полезно?

Решение

Проблема в том, что вы сбрасываете переменные "влево" и "вправо", как только происходит второй щелчок мыши.Это хоть немного ближе к тому, что вы ищете?

    function getMouseXYUp(e) {
        $("body").die('mousemove');

        var h = (document.height - e.pageY + 17);
        var left = id-1;
        var right = id+1;
        setTimeout(function() { moveleft(left, h); }, 100);
        setTimeout(function() { moveright(right, h); }, 100);

        return true;
    }

    ...

    function moveleft(left, h) {
        if (left >= 0){
            $("#div"+left).animate({'height': h}, 400);
            left--;
            setTimeout(function() { moveleft(left, h); }, 50);
        }
    }

    function moveright(right, h) {
        if (right < divs){
            $("#div"+right).animate({'height': h}, 400);
            right++;
            setTimeout(function () { moveright(right, h); }, 50);
        }
    }

Другие советы

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

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top