Question

我有以下代码，当您向下滚动时会更改div的类。问题是如果您滚动得非常快（或者如果我将链接放到菜单中的div），则超时功能不会仅执行最后一个条件，而是将所有条件作为序列执行。我想要做的是，如果条件在函数超时时发生变化，则跳过该函数并检查下一个条件。

  $(document).scroll(function() {    
  var about = jQuery('#hh1').position().top;
  var portfolio = jQuery('#hh2').position().top;
  var services = jQuery('#hh3').position().top;
  var workingprocess = jQuery('#hh4').position().top;
  var clients = jQuery('#hh5').position().top;
  var blog = jQuery('#hh6').position().top;
  var contact = jQuery('#hh7').position().top;
  var scroll = $(this).scrollTop();
  if (scroll >= hh1-90 && scroll < hh3-90 || scroll >= hh5-90 && scroll < hh6-90)
  {setTimeout('$(".div").addClass("MyClass")',3440);}
  else 
  {
  setTimeout('$(".div").removeClass("MyClass")',3440);
  }
  });

Answer 1

setTimeout(...)方法在超时发生时执行函数。你没有给它发送功能。

setTimeout('$(".div").addClass("MyClass")',3440);

将此更改为

setTimeout(function(){$(".div").addClass("MyClass")},3440);

然后 -

您必须存储setTimeout(...)方法返回的数字超时ID，并使用它来清除超时clearTimeout(...)。

保存超时ID，如

timeoutID = setTimeout(function(){$(".div").addClass("MyClass")},3440);

然后用它来清除计时器。

clearTimeout(timeoutID);

您无需检查是否已发生超时，因为如果发生超时，则已经调用了指定的函数，如果没有，则需要清除它。因此，只需在条件发生变化时清除超时。

Answer 2

试试这个：

var addClass = function() {
    $(".div").addClass("MyClass");
}

var removeClass = function() {
    $(".div").removeClass("MyClass");
}

if (scroll >= hh1-90 && scroll < hh3-90 || scroll >= hh5-90 && scroll < hh6-90)
  {
      setTimeout( myClass,3440);
  }
  else 
  {
      setTimeout(removeClass,3440);
  }

如果条件更改，请不要执行setTimeout

2 个答案: