Question

我有一个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。任何想法都会非常有用，我一直在扯掉我的头发！

Answer 1

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

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

Answer 2

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

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

因此，我提出this fiddle。这是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();

正如您所看到的，该函数以递归和异步方式调用自身，并且在手动重置滚动后可以重新启动整个事物。您还可以为滚动完成添加事件侦听器。

Javascript while循环更改div的滚动位置崩溃网站

2 个答案: