Question

我有以下代码：

var w = $(window);
var $navbar = $('.navbar');
var didScroll = false;
w.on('scroll', function(){
    didScroll = true;
});

function AddScrollHeader(pxFromTop) {
    setInterval(function() {
        if ( didScroll ) {
            didScroll = false;
            var scroll = w.scrollTop();

            if (scroll >= pxFromTop) {
                $navbar.addClass('scroll-header');
            } else {
                $navbar.removeClass('scroll-header');
            }

        }
    }, 200);
}

w.on("resize", function(){

    if ( w.width() < 992  ) { 
        didScroll = false;  
        $navbar.addClass('scroll-header');
    } else if ( w.width() > 992  ) {
        AddScrollHeader(150);
    } else {
        return false;
    }
}).resize();

当需要跨越宽度的标题时，它会应用一个类，但由于某些原因，在调整大小时，小于992它仍使用AddScrollHeader()，即使它不在if的编码中。有谁知道为什么会这样？我重新安排了didScroll和顶部滚动功能，在很多不同的地方我似乎无法禁用滚动事件。

Answer 1

如果窗口的大小小于992，您是否真的要取消基于时间的代码？

是的，这就是我要实现的目标。

当您调用setInterval()函数时，它将继续调用您反复传递的函数，直到用户离开页面或您通过调用{{3}明确取消它并传入setInterval()返回的ID：

// start the interval:
var intervalID = setInterval(function() { /* some code */ }, 200);
// at some later point stop the interval:
clearInterval(intervalID);

因此，将其应用于您的代码，在外部作用域中添加intervalID变量，在调用setInterval()时设置该变量，然后在clearInterval()分支内调用if你的调整大小处理程序：

var intervalID;

function AddScrollHeader(pxFromTop) {
    clearInterval(intervalID); // clear to avoid creating multiple concurrent intervals
    intervalID = setInterval(function() {
        if ( didScroll ) {
            didScroll = false;
            $navbar.toggleClass('scroll-header', w.scrollTop() >= pxFromTop);
        }
    }, 200);
}

w.on("resize", function(){    
    if ( w.width() < 992  ) { 
        didScroll = false;
        clearInterval(intervalID);
        $navbar.addClass('scroll-header');
    } else if ( w.width() > 992  ) {
        AddScrollHeader(150);
    } else {
        return false;
    }
}).resize();

请注意，使用无效的intervalID调用clearInterval()并不会导致错误，因此无需测试该时间点是否已存在，但您执行< / em>想要避免连续多次调用setInterval()而没有清除之前的那些 - 最简单的方法就是在重新设置之前立即清除它。

请注意（与您询问的内容无关）我已经简化了第一个函数中的代码：我已经替换了调用{if / else结构的.addClass() / .removeClass()结构1}}或{{1}}调用clearInterval()，它接受一个布尔值作为第二个参数来告诉它是否添加或删除指定的类。

从条件语句中运行取消基于时间的函数

1 个答案: