0

我有一个 div 显示一些水平滚动的图像，white-space:nowrap; overflow-x:scroll我正在尝试使下面的功能工作：

var mouseIsInDiv = false;
function autoScroll() {
var i = 1;
while (mouseIsInDiv = false) {
    setTimeout(function(){
    document.getElementById("theDiv").scrollLeft = i;
    i++;
    },50);
}
}

它应该循环（当鼠标不在这个可滚动的 div 中时）每 50 毫秒将滚动位置增加 1px。换句话说，它应该在调用此函数时自动滚动图像。我没有收到任何语法错误，但是每当我按下网页上调用此函数的按钮时，浏览器就会完全崩溃——我使用的是最新版本的 Chrome、Safari 和 Firefox。任何想法都会非常有帮助，我一直在为此烦恼！

4

2 回答 2

0

您的循环创建了许多同时发生的超时（在 50 毫秒之后），您需要在 set timeout 函数内递归地设置超时，并询问是否 mouseISInDiv 在 set timeout 函数内。

当前的代码状态，循环将在很短的时间内运行很多次，并且页面会崩溃（它是无限的），并且在 50 毫秒后会有很多设置的超时运行。

于 2013-02-28T22:55:50.383 回答
0

我在这个工作上玩得很开心，所以尽管正确答案已经被接受，我还是会发布我的回复。

基本上，您需要重组所有内容，以便整个方案是异步的。这意味着事件侦听器响应鼠标移动，并且没有 while 循环。

因此，我提出了这个小提琴。这是javascript：

var mouseIsInDiv = false;
var theDiv = document.getElementById("theDiv");
theDiv.onmouseover = function() { mouseIsInDiv = true; };
theDiv.onmouseout = function() {
    mouseIsInDiv = false;
    scrollLeft1();
};

function scrollLeft1() {
  if (mouseIsInDiv == false && theDiv.scrollLeft < theDiv.clientWidth) {
    theDiv.scrollLeft += 1;
    setTimeout(scrollLeft1, 50);
  }
}

scrollLeft1();

As you can see, the function calls itself recursively and asynchronously, and the whole thing can be restarted after manually resetting the scroll. You could also add an event listener for the scroll completion.

于 2013-02-28T23:22:30.817 回答