Question

我编写了一个移动滑动条的代码，我希望对其进行改进，这样当用户按下它时，它就会不停地移动。我在本网站的帮助下使用不同的问题编写了这段代码。我的问题是无限循环。

// 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()中的标志不是由函数读取的。

Answer 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();
});

通过鼠标按下连续运行功能

1 个答案: