Question

我有很多javascript函数。为了停止两次调整大小事件，我实现了一个修复程序，该程序迄今为止一直运行良好。

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

＆＃13;

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

＆＃13;

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

＆＃13;

<强> Second code Demo

＆＃13;

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

＆＃13;

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

＆＃13;

窗口调整大小而不是开火

1 个答案: