Question

我有一个简单的JavaScript函数来操作DOM（出于布局原因，元素的高度）。

在窗口调整大小（限制为1秒）和按钮点击时调用函数get。在我的函数中，所有内容都包含在_.delay（）函数中，以便脚本等待1秒触发动画完成。

问题在于，有时候函数会在另一个之后快速调用，第二个调用在第一个调用结束之前开始。现在，函数调用正在同时执行它们的操作，一切都变得糟糕。

我的问题：
如何告诉函数一次只运行一个？某种锁可能会阻止第二次调用执行。如果第二个调用仍然执行，那将是很好的，但只有在第一次调用后才能删除锁定。

在JavaScript中可能会出现这样的情况吗？

修改

以下是脚本外观的代码示例：

function doStuff() {
    var stuff = $('[data-do-stuff]');
    var height = stuff.height();

    // Add CSS class that changes height of stuff
    // Class starts an animation of duration of 1s
    stuff.addClass('active-stuff');

    // Wait 1s for the animation started by added class
    _.delay(function() {
        stuff.height(height * 42);
    }, 1000);
}

$(window).on('resize', _.throttle(function() {
    doStuff();
}, 1000));

$('.tasty-button').on('click', function() {
    doStuff();
});

这不是一个有效的例子，只是我脚本的一般结构的要点。

如果我是点击美味按钮上的多次（大约3x in 1s）它与一切都混乱。（在我的真实剧本中，我有更多的触发器，所以只需禁用按钮1秒钟就不会有诀窍-.-）

我希望它的行为如下：如果doStuff执行，则锁定每个调用，直到doStuff执行完毕，然后执行锁定的调用。

Answer 1

PROMISES in Javascript正是您要找的。

Answer 2

如果没有代码示例，很难建议针对您的问题的解决方案。但是，这里有一些关于你整体问题的想法：

您所遇到的是一种称为“竞争条件”，其中您的应用程序的一部分依赖于在不确定时间完成的多个功能。

通常，有两种方法可以处理这样的情况：

1）使用回调。 About Callbacks

2）正如另一位用户建议的那样，使用JS promises。 About JS Promises

锁定同步JavaScript调用

2 个答案: