javascript - 干渉しない類似要素

Question

つまりね：

次のいずれかの場合に、固定ポップアップを追加できるjQuery関数が必要です。

• A.) mouseenter が発生し、その後 popUp が次の mouseleave でフェードアウトして削除される、または;
• B.)何らかのスクリプトによって具体的に呼び出された後、指定された時間後にフェードアウトして削除される場合。

難しすぎてはいけない、と私は思った。ただし、fadeIn/Out() が関係しているため、最初の popUp が完全に消える前に別の popUp の作成が呼び出され、さまざまな方法で全体が混乱する可能性があります。質問:作成された要素を混乱させることなく作成および管理する関数をどのように設計できますか?

ここで、追加された popUps の ID に変数 ID 値を追加して、fadeIn/Out 呼び出しが正しいものにのみ適用されるようにすることを考えましたが、これは意図したとおりに機能しません。var++によって増加します。この関数は、その var よりも低い ID 値を持つ popUp を操作することはありません。

これまでのところ、次の形式のものを作成しました。これは、私が考えていることを適切に示していることを願っています:

var p1 = 0;
var p2 = 0;

function popUp(text, duration, targetLMN){

    if (duration  && !(targetLMN)) {

        $('body').append('<div id="popUpDur_'+p1+'" class="popUp" style="display:none;"> text </div>');

        // the following lines mess up as soon as another
        // popUp is created before the last one is gone.

        $('.popUpDur_'+p1).fadeIn(t).delay(duration).fadeOut(t, function(){
            $('.popUpDur_'+p1).remove();
        });

        p1++;
    }

    else if (targetLMN && !(duration)){

        $(targetLMN).mouseenter(function(){
            $('body').append('<div id="popUpTar_'+p2+'" class="popUp" style="display:none;"> text </div>');
            $('#popUpTar_'+p2).fadeIn(t);
        });

        $(targetLMN).mouseleave(function(){
            $('#popUpTar_'+p2).fadeOut(t, function(){
                $('#popUpTar_'+p2).remove();
            });
        });

        p2++;
    }
}

私はそれを理解することはできません！

よろしくお願いします。