有点像 JS 中的单例

Question

我想确保如果一个#offer img 触发了附加到事件处理程序的函数，那么在第一个函数完成其工作之前，没有其他#offer img 触发另一个函数。我发现为此我需要一个 Singleton。这是我尝试做的事情：

$(document).ready(function () {
    var inProgress = false;
    $('#offer img').mouseover(function (event) {
        if (!inProgress) {
            inProgress = true;

            $('#offer div img').addClass('gray');
            $(event.target).removeClass('gray');

            var clickedId = event.target.id;
            var textId = '#' + clickedId.substr(0, clickedId.search('_'));
            $('.innerContent p:visible').fadeOut(300, function () {
                $(textId).fadeIn();
            });

            inProgress = false;
        } else {
            return;
        }
    }); 
});

不工作。这段代码有什么问题？任何帮助表示赞赏:)

Answer 1

问题是在所有 fadeIn 和 fadeOut 函数完成解析之前，inProgress 立即设置为 False。所以你的 mouseOver 功能已经完成，但 fadeIn 和 fadeOut 还没有。

如果您希望在淡入完成之前不设置 inProgress，例如

        $('.innerContent p:visible').fadeOut(300, function () {
            $(textId).fadeIn(300, function(){
                inProgress = false;
            });
        });

    } else {
        return;
    }

有点像 JS 中的单例

Kinda singleton in JS

javascript

jquery

events

singleton

handler