Javascript jQuery：当元素在页面上可见时，每次只触发一次函数

此问题基于此优秀的StackOverflow元素可见性检测脚本：

使用上面的脚本，我能够正确地检测页面上的元素何时可见（通过滚动到该元素），从而触发警报。我无法从上面的脚本代码中看到的区别是，我希望每次元素可见时只触发一次警报。使用下面的JSFIDLE代码，当元素可见时，每次鼠标或滚动条滚动都会继续触发警报：

函数是crolledintoview（elem）{
var docViewTop=$（window.scrollTop（）；
var docViewBottom=docViewTop+$（window）.height（）；
var elemTop=$（elem）.offset（）.top；
var elemBottom=elemTop+$（elem）.height（）；
返回（（elemBottom=docViewTop））；
}
$（窗口）。滚动（函数（）{
var myelement=$（“#overdueWarning”）；
if（IscrolledinToView（myelement））{
警惕（“你的书过期了”）；
}
});

我想要的是当元素变为可见时警报只触发一次。。。然后，只有当元素变得不可见时，才会再次可见

如果我还能提供什么，请告诉我。谢谢大家!

伯克利

---

您发布的JSFIDLE中没有发生任何事件（没有触发警报）。你能检查一下你的护照吗？此外，您的上述代码是否允许在再次显示元素时再次触发警报（在有人向下滚动了一段时间后，然后再次备份）。如果元素重新可见，我希望它重新触发。谢谢。好的。。。我所要做的就是将“console.log”编辑成“alert”，它就工作了。让我在我的站点代码上测试它，然后回来指定它作为答案。谢谢。警报---是的，如果元素再次显示，您将得到警报---将重新触发。谢谢，我很感激。

function isScrolledIntoView(elem) {
  var docViewTop = $(window).scrollTop();
  var docViewBottom = docViewTop + $(window).height();

  var elemTop = $(elem).offset().top;
  var elemBottom = elemTop + $(elem).height();

  return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}

$(window).scroll(function () {
  var myelement = $('#overdueWarning');

  if (isScrolledIntoView(myelement)) {
    alert('Your book is overdue');
  }
});

var shown = false;
$(window).scroll(function () {
    var myelement = $('#overdueWarning');
    if(isScrolledIntoView(myelement)){
        if(!shown){
         console.log('Your book is overdue');
        }
         shown = true;
    }
    else{
     shown = false;
    }
});