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

Question

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

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

这是我的代码：

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;
}

我希望此函数在获得 called/recalled 时将变量 'alpha' 的值设置为 false（最初），并在滚动事件结束时更新标志的值（我会稍后使用带有标志的 if 条件进行计算）。我输出 alpha 的值只是为了突出这个问题。

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

false true true true...

当我调整 window 大小时出现问题。我得到的输出类似于

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

Fiddle Demo

试试这个

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

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

Scroll event using old value after screen resize

javascript

jquery

resize