javascript - 基于jQuery的展示广告在移动设备上比较落后

嘿，

我希望你们能帮助我。我试图建立一个装有广告的盒子。 revealer-box（以下简称它）位于内容之间，广告的位置固定且位于内容的后面（无法看到，通过z-index和display: none隐藏）。如果revealer-box在屏幕上可见，则广告将获得display: block。但是唯一可见的地方是revealer-box，因为所有其他元素的z-index都较高。因此，revealer-box的工作方式类似于您浏览的窗口。一切都完成了，不是问题。唯一的问题是，它在移动设备（Galaxy S4，Androdid 5.0.1，Chrome）上有点落后。看来这与我的jQuery有关。让我在这里发布：

if($(window).width() < 601) {
    showElem(".revealer-box");
} else {
    hideElem(".revealer-box");
    hideElem(".revealer-ad");
}

$(window).resize(function() {
    if($(window).width() < 601) {
        showElem(".revealer-box");
    } else {
        hideElem(".revealer-box");
        hideElem(".revealer-ad");
    }
});


$(window).scroll(function() {
    if( isOnScreen(".revealer-box") && $(".revealer-box").hasClass("is-active") ) {
        showElem(".revealer-ad");
        if(flgCallGA) {
            callGA.call($(".revealer-ad"));
            flgCallGA = false;
        }
    } else {
        hideElem(".revealer-ad");
    }
});

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

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

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

function showElem(elem) {
    if( !$(elem).hasClass("is-active") ) {
        $(elem).addClass("is-active");
    }
}
function hideElem(elem) {
    if( $(elem).hasClass("is-active") ) {
        $(elem).removeClass("is-active");
    }
}

如您所见，它仅在移动设备上显示。而is-active类仅给出一个display: none。而已。我希望你能帮助我。

真诚的

努努

最佳答案

正如Stan已经指出的那样，“滚动”事件在简单的滚动中被触发了数百次。删除滚动上的事件侦听器，并在短时间后再次添加。

function addListener(){
window.addEventListener("scroll", scrolling);
}
function scrolling(){
//remove the event listener
window.removeEventListener("scroll",scrolling);

window.setTimeout(addListener,500);
}
addListener();