窗口调整大小不触发

Question

我有许多 javascript 函数。为了阻止 resize 事件触发两次，我实施了一个修复程序，该修复程序迄今为止运行良好。

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

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

但是，我刚刚创建了另一个函数，它在食物链中的位置略低，但功能完全相同。

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

问题在于它没有触发 - 自动增长功能有效，我看不到任何 javascript 错误 - 它只是调整大小功能。

为了检查它是否真的在触发，我添加了警报。还是不开心。

但是，当我还向标签调整大小功能添加第二个警报时，两个警报都被触发了。我猜这是某种时间问题，但我只是不知道如何解决它。

有人建议吗？

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>