get wrong value when window resize

Question

First, I get the window width and minus something then assign it to a variable,

Second, I resize the window and want to get the value that is current window width minus something

but I get wrong value, it will alert two value one is right and another is wrong,I do not know why and how to fix it, help me, thx

my html code is

<p class="test">click me get value</p>

js is

(function(){

test();

$(window).resize(function(){
test();
});

}());



function test() {
    var t = $(window).width()-74;
    alert('one ' +t);
    $(document).on('click', '.test',{t: t}, get);
}
function get(event) {
    var l = event.data.t
    alert('two ' +l)
}

the fiddle version is http://jsfiddle.net/dxcqcv/xetbhwpv/1/

Are you using the correct object? What width you want? From `document` or form `window`? See this http://stackoverflow.com/questions/14035819/window-height-vs-document-height — rodrigogq, Dec 02 '14 at 13:08
@rodrigogq I sure I am right, using $(window).resize(), I want to get current window width, not document width — Roy, Dec 02 '14 at 13:15
I meant the document.width vs window.width, not the resize function. Anyway, what value do you expect? During resize operations the `resize` function is called before, during and/or after the resize occurs, depending on your browser. — rodrigogq, Dec 02 '14 at 13:21
@rodrigogq I just wanna the value that current window width minus something, but in my code, when resize is done, then click the test class p tag, it alert me two value one right and another wrong — Roy, Dec 02 '14 at 13:26

score 1 · Accepted Answer · answered Dec 02 '14 at 14:11

I am not sure what are the values you are expecting to get, but take a look at the resize function documentation on jquery api:

http://api.jquery.com/resize/

Code in a resize handler should never rely on the number of times the handler is called. Depending on implementation, resize events can be sent continuously as the resizing is in progress (the typical behavior in Internet Explorer and WebKit-based browsers such as Safari and Chrome), or only once at the end of the resize operation (the typical behavior in some other browsers such as Opera).

As you can see, some browsers will call resize only at the end of the resizing, but some other will keep calling your function on the process of resizing. This means you will get different values from your call when you are not resizing and while in a resizing operation.

I made some changes to your code in order to become cleaner. Please take a look at this jsfiddle using the developer console (press F12 on browsers):

http://jsfiddle.net/xetbhwpv/7/

$(document).ready(function(){
    test();
    $(window).resize(function(){
        test();
    });
});

function test() {
    var t = $(window).width() - 74;
    console.log('one ' + t);
    $('.test').off('click');
    $('.test').on('click', {t: t}, getInfo);
}
function getInfo(event) {
    var l = event.data.t
    console.log('two ' +l)
}

As you can see now, the last two XX messages are equal to the last resize messages.

get wrong value when window resize

1 Answers1