javascript - 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);
}