Javascript 只调用滚动条上的函数一次

我有一个问题，关于一个函数，如果对象在我的屏幕内，该函数将被调用。但当对象在我的屏幕内时，会调用函数并触发警报。但如果我关闭警报并向下滚动，事件将再次调用。我不想那样。我怎样才能解决这个问题

到目前为止，我的代码是：

<div id="wrapper">
    scroll down to see the div
</div>
<div id="tester"></div>

向下滚动以查看div

JS

$(window).on('scroll',function() {
    if (checkVisible($('#tester'))) {
        alert("Visible!!!")        
    } else {
        // do nothing 
    }
});

function checkVisible( elm, eval ) {
    eval = eval || "object visible";
    var viewportHeight = $(window).height(), // Viewport Height
        scrolltop = $(window).scrollTop(), // Scroll Top
        y = $(elm).offset().top,
        elementHeight = $(elm).height();   

    if (eval == "object visible") return ((y < (viewportHeight + scrolltop)) && (y > (scrolltop - elementHeight)));
    if (eval == "above") return ((y < (viewportHeight + scrolltop)));
}

$（窗口）.on（'scroll'，function（）{
如果（选中可见（$（“#测试仪”））{
警报（“可见！！！”）
}否则{
//无所事事
}
});
功能检查可见（elm、eval）{
eval=eval | |“对象可见”；
var viewportHeight=$（窗口）.height（），//视口高度
scrolltop=$（窗口）.scrolltop（），//Scroll Top
y=$（elm）.offset（）.top，
elementHeight=$（elm）.height（）；
if（eval==“对象可见”）返回（（y<（viewportHeight+scrolltop））&&（y>（scrolltop-elementHeight））；
if（eval==“上方”）返回（（y<（视口高度+滚动顶部））；
}

我想要的是，如果对象可见，If函数只会被调用一次，而不是在每个滚动条上调用。

尝试使用

.one（）

：

或者，取消内部事件的链接：

$(window).on('scroll',function() {
   // After Stuff
   $(window).off('scroll');
});

我猜您可能需要此代码：

$(window).on('scroll',function() {
    if (checkVisible($('#tester'))) {
        alert("Visible!!!");
        $(window).off('scroll');
    } else {
        // do nothing
    }
});

---

拨弄：

当$test在屏幕中时，删除事件侦听器

$(window).on('scroll',function() {
    if (checkVisible($('#tester'))) {
       alert("Visible!!!")   
       $(window).off('scroll');
    } else {
    // do nothing
    }
});

---

让我们尝试用javascript解决您的问题，因为这里的所有答案都在jquery中。您可以使用全局变量，因为只要页面未刷新，浏览器就会保留其值。所有在函数外部声明的变量都称为全局变量，可以由任何函数访问

window.onscroll=myScroll；
变量计数器=0；//全局变量
函数myScroll（）{
var val=document.getElementById（“值”）；
val.innerHTML='pageYOffset='+window.pageYOffset；
若（计数器==0）{//若计数器为1，它将不执行
如果（window.pageYOffset>300）{
警报（“您已滚动到第二个div”）；
计数器+++；//计数器递增1，新值=1
}
}
}

#包装器，#测试仪{
宽度：300px；
高度：300px；
边框：1px纯黑；
填充：10px；
}
#包装纸{
文本对齐：居中；
}
#测试员{
边框：1px深红色；
}
#价值观{
位置：固定；
左：自动；
右：40px；
顶部：10px；
}

向下滚动至div以查看警报

---

为我工作

注意：这里的所有答案都使用

$（窗口）。关闭（'scroll'）这可能会影响您的其他脚本部分，例如在我的情况下，我的粘性导航停止工作。所以我使用了一个简单的标志变量来解决我的问题

var scrolled = false;
$(window).on('scroll', function() {
  if (!scrolled) {
    if (checkVisible($('#tester'))) {
      alert("Visible!!!");
      $(window).off('scroll');
    } else {
      // do nothing
    }
    scrolled = true;
  }
});

是的。你的上一个代码片段成功了！谢谢你的帮助！我会在11分钟后接受你的回答。试着再次登上榜首，然后再下来。它没有运行$（窗口）。关闭（“滚动”）将永远关闭。@vidit1001这不是一个通用解决方案。这是当前OP需要的东西。这与我的代码有什么不同？这不只是一份拷贝吗？
$(window).on('scroll', function() {
  if ($(document).scrollTop() >= $(document).height() / 100) {
    $("#spopup").show("slow");
    $(window).off('scroll');
  } else {
    $("#spopup").hide("slow");
  }
});

function closeSPopup() {
  $('#spopup').hide('slow');
}

var scrolled = false;
$(window).on('scroll', function() {
  if (!scrolled) {
    if (checkVisible($('#tester'))) {
      alert("Visible!!!");
      $(window).off('scroll');
    } else {
      // do nothing
    }
    scrolled = true;
  }
});