在条件语句中从运行取消 time-based 函数

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();

它在需要时应用 class 到 header 宽度，但由于某些原因在调整大小时，小于 992 它仍然使用 AddScrollHeader() 即使它不在如果的条件。有谁知道为什么会这样？我重新安排了 didScroll 和顶部滚动功能，在很多不同的地方我似乎无法禁用滚动事件。

Answer 1

Do you in fact want to cancel that time-based code if the window is sized to less than 992?

Yeah thats what I'm triyng to achieve.

当您调用 setInterval() function, it will continue to call the function you pass it over and over until the user leaves the page or you explicitly cancel it by calling clearInterval() 并传入 setInterval() 返回的 ID 时：

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

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

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() 不会导致错误，因此此时无需测试间隔是否已存在，但您 do 想避免连续多次调用 setInterval() 而没有清除之前的那些 - 最简单的方法是在再次设置之前立即清除它。

请注意（与您询问的内容无关）我简化了第一个函数中的代码：我替换了调用 [=23= 的 if/else 结构] 或 .removeClass() 调用 .toggleClass()，它接受一个布尔值作为第二个参数，告诉它是添加还是删除指定的 class.

在条件语句中从运行取消 time-based 函数

Cancel time-based function from running in a conditional statement

javascript

jquery

scroll

resize

在条件语句中从 运行 取消 time-based 函数

Cancel time-based function from running in a conditional statement

javascript

jquery

scroll

resize

在条件语句中从运行取消 time-based 函数