停止运行功能

Question

其实我正在尝试滚动功能。根据currentY位置，它将调用autoScroll（）或resetScroll（）。 但问题是当autoScroll（）仍在运行时，如果我们再次点击调用resetScroll（）两者都崩溃并且我的页面无法正常工作（它快速上下移动）。如何停止以前的运行功能。

HTML：

<h2 id="myheading">JavaScript Smooth Animated Auto Scroll Tutorial</h2>
<a href="#" onclick="return false;" onmousedown="scrollTo('div1');">
 Document Section 1</a><br />
<a href="#" onclick="return false;" onmousedown="scrollTo('div2');">
Document Section 2</a><br />
<a href="#" onclick="return false;" onmousedown="scrollTo('div3');">
Document Section 3</a><br />
<a href="#" onclick="return false;" onmousedown="scrollTo('div4');">
Document Section 4</a><br />
<div id="div1" class="contentbox">Div 1 content...</div>

<div id="div2" class="contentbox">Div 2 content...</div>

<div id="div3" class="contentbox">Div 3 content...</div>

<div id="div4" class="contentbox">Div 4 content...</div>

CSS：

div.contentbox {
background: #FFF;
height: 500px;
margin: 20px;
font-size: 28px;
border: #CCC 1px dashed;
}
a{position: fixed;}

JS：

var distance = 40;
var scrollY = 0;

function scrollTo(mk) {

  var currentY = window.pageYOffset;
  var targetY = document.getElementById(mk).offsetTop;
  if (currentY < targetY) {
    autoScrollTo(mk);
  } else {
    resetScroller(mk)
  }
}

function autoScrollTo(el) {
  var currentY = window.pageYOffset;
  var targetY = document.getElementById(el).offsetTop
  var bodyHeight = document.body.offsetHeight;
  var yPos = currentY + window.innerHeight;
  var animate = setTimeout('autoScrollTo(\'' + el + '\')', 24);
  if (yPos > bodyHeight) {
    clearTimeout(animate);
  } else {
    if (currentY < targetY - distance) {
      scrollY = currentY + distance;
      window.scroll(0, scrollY);
    } else {
      clearTimeout(animate);
    }
  }
  console.log(scrollY);
}


function resetScroller(rs) {
  var scrollYR = 0;
  var currentYR = window.pageYOffset;
  var targetYR = document.getElementById(rs).offsetTop;
  var animateR = setTimeout('resetScroller(\'' + rs + '\')', 24);

  if (currentYR > targetYR) {
    scrollYR = currentYR - distance;
    window.scroll(0, scrollYR);
  } else {
    clearTimeout(animateR);
  }
  console.log(scrollYR);
}

Answer 1

您可以根据某些全局变量检查autoScroll函数中的退出策略 - 您可以从其他函数中设置...

Answer 2

您需要记住正在进行的滚动事件，您可以在其中全局保留一个标记，一旦获得新请求，您需要确保前一个元素知道它。

将scrollTo方法更改为

var currentScroll = "";
function scrollTo(mk) {
  var currentY = window.pageYOffset;
  var targetY = document.getElementById(mk).offsetTop;
  if (mk != currentScoll )
  {
     document.getElementById(currentScoll).setAttribute("data-animation", "STOP");
     currentScoll = mk;
  }
  if (currentY < targetY) {
    autoScrollTo(mk);
  } else {
    resetScroller(mk)
  }
}

和您的autoScrollTo方法

function autoScrollTo(el) {
  var currentY = window.pageYOffset;
  var targetY = document.getElementById(el).offsetTop
  var bodyHeight = document.body.offsetHeight;
  var yPos = currentY + window.innerHeight;
  if ( document.getElementById(el).getAttribute("data-animation") == "STOP")
  {
    document.getElementById(el).removeAttribute("data-animation");
    currentScoll = "";
    return false;
  }
  var animate = setTimeout('autoScrollTo(\'' + el + '\')', 24);
  if (yPos > bodyHeight) {
    clearTimeout(animate);
  } else {
    if (currentY < targetY - distance) {
      scrollY = currentY + distance;
      window.scroll(0, scrollY);
    } else {
      clearTimeout(animate);
    }
  }
  console.log(scrollY);
}