JS中有点单例

Kinda singleton in JS

本文关键字:单例 JS      更新时间:2023-09-26

我想确保如果一个#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;
        }
    }); 
});

不工作。这段代码有什么问题?任何帮助,感谢:)

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

如果你想让inProgress在渐变完成之前不被设置,比如

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