window resize not firing

Question

I have a number of javascript functions. In order to stop the resize event firing twice, I implemented a fix, which has been working perfectly to date.

function tabsResize() {
    clearTimeout(timeout);
    timeout = setTimeout(function () {
        tabsUpdate();
    }, 200);
}

$(window).on("resize", tabsResize);

However, I've just created another function, which sits slighly lower in the food chain but does exactly the same thing.

var form = function () {
    var pub = {}, timeout;

function textareaAutoGrow() {
    var pad = $(this).outerHeight(false) - $(this).innerHeight();

    this.style.height = "auto";
    this.style.height = (this.scrollHeight + pad) + "px";
}

function textareaResize() {
    alert("resize");
    clearTimeout(timeout);
    timeout = setTimeout(function () {
        textareaAutoGrow();
    }, 200);
}

function setupBindings() {
    $("body").on("input", "textarea", textareaAutoGrow);
    $(window).on("resize", textareaResize);
}

// PUBLIC FUNCTIONS

pub.init = function () {
    setupBindings();
}

return pub;
} ();

The problem is that it is not triggering - the autogrow function works and there are no javascript errors I can see - it's just the resize function.

In order to check whether it was in fact firing, I added the alert. Still no joy.

However, when I also added a second alert to the tabs resize function both alerts fired. I'm guessing this is some kind of timing issue, but I just don't know how to fix it.

Anyone advise?

Answer 1

first code demo

 var _timeOut = null; function tabsResize() { if(typeof(_timeOut)) clearTimeout(_timeOut); _timeOut = setTimeout(function () { alert('=)'); }, 200); } $(window).on("resize", tabsResize); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

Second code Demo

 var _timeOut = null; var form = function () { var pub = {}, timeout; function textareaAutoGrow() { alert('=)'); var pad = $(this).outerHeight(false) - $(this).innerHeight(); this.style.height = "auto"; this.style.height = (this.scrollHeight + pad) + "px"; } function textareaResize() { alert("resize"); if(typeof(_timeOut)) clearTimeout(_timeOut); _timeOut = setTimeout(function () { textareaAutoGrow(); }, 300); } $("body").on("input", "textarea", textareaAutoGrow); $(window).on("resize", textareaResize); return pub; } (); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>