Запуск функции непрерывно с помощью мыши вниз

0

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

// The right button in the slidebar moves it to the right
var mouseStillDown = false;

function shiftToRight() {
    if (!mouseStillDown) { return; } 
    var cur = ($('#slideBar').position().left - $('#leftButton').outerWidth()) - $('.ingredient').outerWidth();
    // Checks if movement will cause the slidebar out of right edge
    if ($('#fixedPart').outerWidth() - cur > $('#slideBar').outerWidth()) {
        cur = $('#fixedPart').outerWidth() - $('#slideBar').outerWidth();
    }
    $('#slideBar').animate({ left: cur}, { duration: 500 , easing: "swing" } );
    if (mouseStillDown) { setTimeout(shiftToRight(), 500); }
};

$('#rightButton').mousedown(function() {
    mouseStillDown = true;
    shiftToRight();
}).mouseup(function() {
    clearInterval(mouseStillDown);
    mouseStillDown = false;
});

Я также попробовал setInterval(shiftToRight(), 500) но результат был тот же. кажется, что изменение флага в mouseup() не считывается функцией.

  • 0
    А как насчет события mousemove?
  • 0
    К вашему сведению clearInterval не принимает логическое значение в качестве входных данных
Показать ещё 2 комментария
Теги:
mousedown

1 ответ

1
Лучший ответ

Попробуйте следующее

// The right button in the slidebar moves it to the right
function shiftToRight() {
    var cur = ($('#slideBar').position().left - $('#leftButton').outerWidth()) - $('.ingredient').outerWidth();
    // Checks if movement will cause the slidebar out of right edge
    if ($('#fixedPart').outerWidth() - cur > $('#slideBar').outerWidth()) {
        cur = $('#fixedPart').outerWidth() - $('#slideBar').outerWidth();
    }
    $('#slideBar').animate({ left: cur}, { duration: 500 , easing: "swing" } );
};

var rightIntervalId;
$('#rightButton').mousedown(function() {
    event.preventDefault();
    rightIntervalId = setInterval(shiftToRight, 500);
}).mouseup(function() {
    clearInterval(rightIntervalId);
}).click(function() {
    shiftToRight();
});
Поделиться
  • 0
    Извините, что потребовалось много времени, чтобы ответить. Причина в том, что каждый раз, когда я менял деталь, код давал разные результаты! и он не вернулся, когда я отменяю изменения. Прежде всего, этот код начинает работать после удержания кнопки в течение 500 мс. Так что один клик не поддерживается. Я добавил следующее событие щелчка: $ ('# rightButton'). Mousedown (function () {console.log ('кнопка мыши нажата.'); IntervalId = setInterval (shiftToRight (), 500);}). Mouseup (function () {clearInterval (intervalId);}). click (function () {shiftToRight ();});
  • 0
    и теперь, когда я делаю один клик, он сдвигается один раз плюс еще немного. и если я удерживаюсь после того, как он сдвинется один раз, он ничего не сделает, пока я не отпущу кнопку, тогда он сдвинется еще раз. Удивительно, но если я отменю код, первый код перестает работать! Я имею в виду, что он работает как один клик, и ничего не происходит, когда я удерживаю кнопку или отпускаю ее. (На самом деле, удерживая кнопку мыши, курсор превращается в текстовый курсор, и если я перемещаю мышь, он выбирает изображения! Хотя я добавил соответствующий CSS, который мешает выбору функции)
Показать ещё 2 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню