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

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

// 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() не читается функцией.


jquery mousedown
person Pooya    schedule 20.02.2014    source источник
comment
Как насчет события mousemove?   -  person lavrik    schedule 20.02.2014
comment
К сведению, clearInterval не принимает логическое значение в качестве входных данных.   -  person Danny    schedule 20.02.2014
comment
@lavrik Я хочу, чтобы эта функция щелкалась мышью. @Danny Я удалил clearInterval, это не помогло. Как это должно выглядеть?   -  person Pooya    schedule 20.02.2014
comment
Извините, неправильно понял первоначальный вопрос. Посмотрите здесь. У вас проблемы с параметром clearInterval. Это должен быть дескриптор интервала.   -  person lavrik    schedule 21.02.2014

Ответы (1)


arrow_upward
1
arrow_downward

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

// 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();
});
person Danny    schedule 20.02.2014
comment
Извините, что долго не отвечал. Причина в том, что код дает разные результаты каждый раз, когда я меняю часть! и он не вернулся, когда я отменил изменения. Во-первых, этот код начинает работать после удержания кнопки в течение 500 мс. Таким образом, одиночный щелчок не поддерживается. Я добавил следующее событие щелчка: $('#rightButton').mousedown(function() { console.log('кнопка мыши нажата'); intervalId = setInterval(shiftToRight(), 500); }).mouseup(function () { clearInterval(intervalId); }).click(function() { shiftToRight(); }); - person Pooya; 21.02.2014
comment
и теперь, когда я делаю один щелчок, он смещается на один раз плюс еще немного. и если я удерживаю после того, как он сдвинется один раз, он ничего не сделает, пока я не отпущу кнопку, затем он сдвинется еще раз. Удивительно, но если я отменю код, первый код перестанет работать! Я имею в виду, что это работает как один щелчок, и ничего не происходит, когда я удерживаю кнопку или отпускаю ее. (На самом деле, удерживая кнопку мыши, курсор меняется на текстовый курсор, и если я перемещаю мышь, он выбирает изображения! Хотя я добавил соответствующий CSS, который предотвращает выбор функциональности) - person Pooya; 21.02.2014
comment
Я добавил журнал 'mouse button is down.' для проверки поведения события. Он вызывается только один раз! - person Pooya; 21.02.2014
comment
Я нашел ошибку в своем коде. setInterval(shiftToRight(), 500) Мне не следовало использовать () для этой функции. Спасибо @Дэнни - person Pooya; 24.02.2014