setInterval问题

Question

我和setInterval有问题。我试图制作两个按钮来增加或减少scrollLeft属性与滑动效果，但它不起作用。

这是我的代码如下：

var x;
var scrollDiv = document.getElementById("army_selection");

var scrollLeft = document.getElementById("scroll_left");
scrollLeft.addEventListener("mouseover", dec_scroll, false);
scrollLeft.addEventListener("mouseleave", function(){clearInterval(x);}, false);

var scrollRight = document.getElementById("scroll_right");
scrollRight.addEventListener("mouseover", inc_scroll, false);
scrollRight.addEventListener("mouseleave", function(){clearInterval(x);}, false);


/* Functions */

function inc_scroll() {
    x = setInterval(scrollDiv.scrollLeft += 5, 1);
}

function dec_scroll() {
    x = setInterval(scrollDiv.scrollLeft -= 5, 1);
}

Answer 1

基本上，现在，scrollDiv.scrollLeft += 5正在滚动函数中执行一次，返回值将传递给setInterval的第一个参数。因为它不是一个函数，所以不会再被调用。

setInterval()将函数作为其第一个参数。由于scrollDiv.scrollLeft += 5不是函数，因此需要将其包装在函数中：

function inc_scroll() {
    x = setInterval(() => scrollDiv.scrollLeft += 5, 1);
}

function dec_scroll() {
    x = setInterval(() => scrollDiv.scrollLeft -= 5, 1);
}

或者如果您更喜欢旧的函数格式：

function inc_scroll() {
    x = setInterval(function() { scrollDiv.scrollLeft += 5 }, 1);
}

function dec_scroll() {
    x = setInterval(function() { scrollDiv.scrollLeft -= 5 }, 1);
}