仅运行一次 jQuery 函数（而不是在事件发生时无限循环）答案

【问题标题】：run jQuery function only ONCE (instead of endless loop when event occur)仅运行一次 jQuery 函数（而不是在事件发生时无限循环）
【发布时间】：2014-02-26 01:24:06
【问题描述】：

我有这个 jQuery 代码，当用户向下滚动到广告类高度点（及之后）时会触发该代码。问题是我希望它只运行一次并停止警报。非常简单的调整（并且没有 settimeout 也没有设置变量；）

css:

header{width:100%;height:200px;background:teal;}
.ad{width:500px;height:120px;margin:0 auto;background:red;}
article{width:100%;height:1500px;background:yellow;}

html:

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
</head>
<body>
  <header>
    <div class='ad'></div>
  </header>
  <article></article>
</body>
</html>

jquery：

$(function(){
  $(window).scroll(function(){
    var aTop = $('.ad').height();
    if($(this).scrollTop()>=aTop){
        alert('header just passed.');
    }
  });
});

谢谢！

【问题讨论】：

可能重复：stackoverflow.com/questions/8429020/call-a-function-only-once
没有重复...不同的意思

标签： jquery function scroll alert scrolltop

【解决方案1】：

给你：

http://jsfiddle.net/hamoom/qX6bn/

$(function(){

var alerted = false; 

$(window).scroll(function(){
var aTop = $('.ad').height();

if($(this).scrollTop()>=aTop && !alerted){
    alerted = true;
    alert('header just passed.');
} 
else if($(this).scrollTop()<=aTop && alerted){
    alerted = false;
}
});
});

我只是使用一个标志来防止它一遍又一遍地触发该警报。我在“else”块中重置它，这样当您向上滚动时，您可以再次获得相同的警报

【讨论】：

尝试上下滚动你仍然会收到额外的警报...jsfiddle.net/qX6bn/1
而且我认为有一种更简洁的方法，无需使用外部变量：D
如果您不想要额外的警报，只需删除 else 块。有时您必须使用一些额外的变量。当您收到第一个警报时，该功能仍在滚动......必须以某种方式停止它

【解决方案2】：

$(function(){
  var alerted = false; 

  $(window).scroll(function(){
    var aTop = $('.ad').height();

    if($(this).scrollTop()>=aTop && !alerted){
        alerted = true;
        alert('header just passed.');
    }
  });
});

【讨论】：

【解决方案3】：

你应该像这样使用on和off：

$(window).on('scroll.foo', function(){
    // stop this once and for all!
    if( something == true )
       $(window).off('scroll.foo');
});

如上所示，绑定事件时必须使用作用域，以便以后可以解除绑定，而不会对也可能绑定到同一个对象（在这种情况下，窗口对象）的确切事件造成任何损害）。

一旦满足某个条件，监听器将不复存在，因此不会触发回调。

【讨论】：