0

Web サイト用の便利なツールチップを作成しましたが、データがキャッシュされる前にマウスで高速に移動すると問題が発生します。

状況は次のとおりです。データベースから動的にツールチップを作成します。そうするために2つのajax呼び出しを行い、必要なものを正確に作成するために多くのdomを作成します。関数は1つずつ自分自身を呼び出していますが、ツールチップが完全に作成される前に結果が表示されます。

表示をトリガーするには、次の 1 つを使用します。

$('a').live('mouseenter',function(){
     BuildTooltip(this);
     $('#tooltipdiv').css('visibility','visible');
});

ajax呼び出しが終了したときにのみツールチップを表示したい.ツールチップは完全に作成されており、前のものと重ならない. ajax がキャッシュされている場合は適切に機能しますが、キャッシュされていない場合は機能しません。

async:false を使用してみましたが、それが作成するフリーズは、ツールチップがオーバーラップするほどユーザーフレンドリーではありません。

どんな助けでも大歓迎です:)

編集：

これが私の BuildTooltip 関数のコードです。ただし、それは他の関数を呼び出し、すべてが約400行であるため、すべてをコピーすることはできません:(

function BuildTooltip(element){
$('#tooltipdiv').remove();
if(String(element).indexOf('dbitem.php?db=')!=-1){
    url=String(element);
    var db=url.substring(url.indexOf('=')+1,url.indexOf('&'));
    $('body').append('<div class="" id="tooltipdiv"><div class="" id="uctt">\
        <div class="" id="itemttheader"></div><span class="" id="nomitem">\
        </span><div class="" id="imgitem"><img></img></div><div class="" id="type">\
        </div></div><div id="cd"></div><div class="" id="armor"><span class="" id="minarmor">\
        </span><span class="hash">-</span><span class="" id="maxarmor"></span> Armor</div><div class="" id="dmgweap">\
        <span class="" id="min"></span><span class="hash">-</span><span class="" id="max"></span> Damage</div>\
        <div class="" id="dmgweapnorm"><span class="" id="minmin"></span>\
        <span class="hash">-</span><span class="" id="maxmin"></span><span class="hash">-</span><span class="" id="minmax"></span><span class="hash">-</span>\
        <span class="" id="maxmax"></span> Damage</div><div class="" id="dpsnorm">\
        <span class="" id="mindamagepersec"></span> <span class="hash">-</span> <span class="" id="maxdamagepersec">\
        </span><p> Damage Per Second</p></div><div class="" id="dps"><span class="" id="damagepersec">\
        </span><p> Damage Per Second</p></div><div class="" id="attackspeed"><span class="" id="aps">\
        </span> Attacks Per Second</div><div class="" id="effect"></div><div class="" id="effectpsk">\
        </div><span class="" id="slot"></span><div id="useless"></div><div id="set"><span></span><div id="part0" class="part"></div>\
        <div id="part1" class="part"></div><div id="part2" class="part"></div><div id="part3" class="part"></div>\
        <div id="part4" class="part"></div><div id="part5" class="part"></div></div><div class="" id="requiredlevel">Required level : \
        <span class="" id="minlvl"></span></div><div class="" id="rewards">Rewards : \
        <span class="" id="reward"></span></div><div class="" id="points">\
        <span class="" id="point"></span> Points</div><div class="" id="durability">\
        Durability : <span class="" id="duramin"></span><span class="hash">-</span><span class="" id="duramax">\
        </span></div></div></div>');
    var offset=$(element).offset();
    request = $.ajax({
    url: "getphp/gettooltip.php",
    type: "GET",
    data: {db : db, id : url.substring(url.lastIndexOf('=')+1)},
    dataType: "JSON"
    });
    request.done(function(msg){
    FillInTooltip(msg,db)
    });
}

}

FillInTooltip 関数は、ajax の結果を使用し、フォーマットし、div に含めます。結果が条件に一致する場合は、他の ajax を呼び出します。

4

1 に答える 1

3

Ajax リクエストの成功時にツールチップを表示できます。

$.ajax({
    type: "POST",
    url: URL, // your url
    success: function (html) {
        $('#tooltipdiv').css('visibility','visible');
    }
});

これで、Ajax リクエストが完了するまでツールチップが表示されなくなりました。

于 2012-05-03T13:07:49.533 に答える