屏幕调整大小后使用旧值滚动事件

Question

希望您一切顺利，并祝您新年快乐。

我正在尝试用jquery完成一件简单的事情。 我想要一个在加载时被调用，调整大小并在其中具有滚动事件侦听器的函数。 加载时，此函数设置一个标志，该标志在scroll事件内部用于进行一些计算。

这是我的代码：

jQuery的

function rezval() {
    var alpha = false;
    document.getElementById('output').innerHTML = '';
    window.addEventListener('scroll', function(e){
        //Some calculations here
        document.getElementById('output').innerHTML += alpha + '\r';
        alpha = true; //Updating flag
    });
}
$(window).resize(function() {
    rezval();
});
$(window).load(function() {
    rezval();
});

HTML

<div id="output" class="output-div"></div>

CSS

body {
    height:2000px; 
    background:#333; 
    overflow-x:hidden;
}

.output-div {
    font-size:14px; 
    color:#fff; 
    width:1000px;
}

我希望此函数在每次调用/调用时将变量'alpha'的值设置为false（最初），并在滚动事件结束时更新flag的值（我稍后将if条件用于该标志计算）。 我输出的alpha值只是为了突出问题。

当我第一次运行加载功能时，它运行完美。 我得到以下输出：

false true true true...

当我调整窗口大小时，问题来了。 我得到的输出是这样的

true false false false true true true.....

我无法理解为什么显示

1）如果为false，则作为第一个输出为true。 就像滚动事件正在缓存变量并重新调用它一样

2）当输出中应该只有一个时出现多个false

我还设置了一个jsFiddle来复制此问题： http : //jsfiddle.net/5dj0jLwn/

任何帮助，将不胜感激。 非常感谢。

Answer 1

您需要全局初始化您的alpha variable ，例如，

var alpha = false; // alpha is global here, now
function rezval() {
    document.getElementById('output').innerHTML = '';
    window.addEventListener('scroll', function(e){
        //Some calculations here
        document.getElementById('output').innerHTML += alpha + '\r';
        alpha = true; //Updating flag
    });
}
// also you need to reinit again in resize function
$(window).on('resize', function() {
    alpha = false;
    rezval();
}).resize();

 var alpha = false; function rezval() { document.getElementById('output').innerHTML = ''; window.addEventListener('scroll', function(e){ document.getElementById('output').innerHTML += alpha + '\\r'; alpha = true; }); } $(window).on('resize', function() { alpha = false; rezval(); }).resize(); 

 body { height:2000px; background:#333; overflow-x:hidden; } .output-div { font-size:14px; color:#fff; width:1000px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div id="output" class="output-div"></div> 

Answer 2

小提琴演示

试试这个

 var alpha = false;
    function rezval() {

        document.getElementById('output').innerHTML = '';
        window.addEventListener('scroll', function(e){
            document.getElementById('output').innerHTML += alpha + '\r';
            alpha = true;
        });
    }
    $(window).on('resize', function() {
        alpha = false;
        rezval();

}).resize();