1

ユーザーがAJAX呼び出しの結果にカーソルを合わせたときに、その結​​果をdivに表示したいと思います（つまり、divの内容をAJAX呼び出しの結果に置き換えます）。基本的な機能は、ページ上のドットを、ユーザーがドットにカーソルを合わせたときにサーバーからのコンテンツを含む円に置き換え、ユーザーがカーソルを合わせなくなったときに再びドットを表示することです。ページ上に多くのドットがあり、それぞれがホバー時に異なる円の内容を持っている場合があります。

私はそれを機能させていますが、ユーザーが指定されたdivにカーソルを合わせている間、AJAX呼び出しが繰り返し呼び出されていることに気付きました。繰り返しの呼び出しを防ぐにはどうすればよいですか？

私はさまざまな使用法を試しましたが、まだ正しく機能していません.one。.unbind('mouseenter', 'mouseleave')

これが私が今持っているものです（ホバー動作はユーザーにとっては正しく機能しますが、バックエンドへの繰り返しの呼び出しを引き起こします）。

<div class="box1" s='<%=value1 %>' t='<%=value2 %>'>
   <div id="circle" style="display: none;">
   </div>
   <div class="dot" id="dot">
      <img src="orangeDot.png" />
   </div>
</div>

およびスクリプト：

<script type='text/javascript'>
    $(document).ready(function () {
        $(".box1").hover(function () {
            var source = $(this).attr('s');
            var target = $(this).attr('t');
            $('#dot').attr("style", "display: none;");
            $('#circle').hide().load('/GetCircle?s=' + source + '&t=' + target).show();
        }, function () {
            $('#circle' + divid).attr("style", "display: none;");
            $('#dot' + divid).attr("style", "display: inline-block;");
        });
    });
</script>
4

5 に答える 5

1

OPへのコメントでの私の質問に対するあなたの回答に基づいて、以下に投稿されたようにサンプル全体を調整します（テストされていません）。一般的な考え方は、ajax が応答を待っている場合は何もせず (競合状態を回避しようとする)、コンテンツを取得して既に完了したというフラグが立てられていない場合はそれを使用するか、単に表示/非表示を調整することです。好みや統合のための調整が必要になる場合があります。

<div class="box" data-s="<%=value1 %>" data-t="<%=value2 %>">
    <div class="circle" style="display: none;">
    </div>
    <div class="dot">
        <img src="orangeDot.png" alt="orange dot" />
    </div>
</div>

<script type='text/javascript'>
    $( function()
    {
        var IN_FLIGHT = 'requestinflight',
            RETRIEVED = 'contentretrieved';

        $( '.box' ).hover(
            function()
            {
                var $box, $circle, $dot;

                $box = $( this );

                if( ! $box.data( IN_FLIGHT ) )
                {
                    $dot = $box.find( '.dot' );
                    $circle = $box.find( '.circle' );

                    if( ! $box.data( RETRIEVED ) )
                    {
                        $box.data( IN_FLIGHT, true );
                        $.ajax( {
                            url: '/GetCircle',
                            data: {
                                s: $box.data( 's' ),
                                t: $box.data( 't' )
                            }
                            dataType: 'html',
                            success: function( html )
                            {
                                $box.data( RETRIEVED, true );
                                $circle.html( html ).show();
                                $dot.hide();
                            },
                            complete: function()
                            {
                                $box.data( IN_FLIGHT, false );
                            }
                        } );
                    }
                    else
                    {
                        $circle.show();
                        $dot.hide();
                    }
                }
            },
            function()
            {
                var $box = $( this );
                if( ! $box.data( IN_FLIGHT ) )
                {
                    $box.find( '.circle' ).hide();
                    $box.find( '.dot' ).show();
                }
            }
        );
    } );
</script>
于 2011-08-17T15:17:57.977 に答える