Scroll event using old value after screen resize

Question

I hope you are doing great and wish you a happy new year.

I am trying to accomplish a simple thing with jquery. I want to have a function that gets called on load, resize and has a scroll event listener inside it. This function sets a flag when loaded which is used inside the scroll event to do some calculations.

Here is my code:

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

I want this function to set the value of variable 'alpha' as false (initially) whenever it gets called/recalled and update the value of flag at the end of the scroll event (I would be using the if condition later with the flag for the calculations). I am outputting the value of alpha just to highlight the issue.

When i run load the function for the first time, it works perfectly. I get the following output:

false true true true...

The problem comes when i resize the window. The output that i get is something like

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

I am not being able to understand why is it showing

1) True as the first output when it should be false. Its like the scroll event is caching the variable and recalling it

2) Multiple false in the output when there should be just one

I have also setup a jsFiddle to replicate this issue: http://jsfiddle.net/5dj0jLwn/

Any help would be appreciated. Thanks a lot in advance.

Answer 1

You need to initialize your alpha variable globally like,

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

Try this one

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