3

次のjQueryコードがあります：

var id_atual
var temp_id
var tempo_flash = 50
var $slide_atual = $('#slider .atual')
var $slide_prox = $('#slider .ocultar')
setInterval(function(){
    id_atual = $slide_atual.attr('alt')
    $.post('get_banner.php', {atual: id_atual}, function(proximo){
        temp_id = proximo.split(';;')
        $slide_prox.attr('src', temp_id[0]).load(function(){
            $slide_atual.hide('fade', tempo_flash, function(){
                $slide_atual.attr('alt', temp_id[1]).attr('src', temp_id[0]).load(function(){
                    $slide_atual.show('fade', tempo_flash)
                })
            })
        })
    })
}, 4000)

そして、次の HTML コード:

<div id="slider">
    <img src="imagens/slider/imagen-slider.jpg" alt="1" class="atual"/>
    <img src="" alt="" class="ocultar" />
</div>

クラス .ocultar が

display: none;

vars tempo_flash はアニメーション時間のみであり、ファイル get_banner.php は mysql データベースから次のバナーを取得するためだけのものです。テスト済みで、正常に動作しています。私が抱えている問題は、少し (4 つまたは 5 つのバナーの変更) 後、ブラウザーが応答を停止し (Firefox Chrome および Opera の場合)、IE でアラートが表示さStack overflow at line: 3れ、ページ全体の JavaScript が機能しなくなることです。

どんな助けでも大歓迎です！

4

2 に答える 2

3

setInterval() 関数の各反復内で、.load()イベントをイメージ プレースホルダーに割り当てます。イベントをオブジェクトに割り当てても、既存のイベントは削除されません!

したがって、2 回目の反復では、イメージ プレース ホルダーには 2 つの.load()イベント ハンドラーがあり、次に 3 つというようになります。画像が読み込まれるたびに、イベントに関連付けられたすべてのイベント ハンドラーが起動されます.load()。おそらく、.load()イベント ハンドラーを 1 回だけ割り当てる (そしてセミコロンを使用する) などして、コードをリファクタリングする必要があります。

于 2012-04-10T14:47:16.040 に答える
0

setInterval を使用しないでください。関数内で setTimeout を使用し、$.post のコールバックで実行する必要があります。次のようにします。

var id_atual
var temp_id
var tempo_flash = 50
var $slide_atual = $('#slider .atual')
var $slide_prox = $('#slider .ocultar')
function tictac(){
    setTimeout(function(){
        id_atual = $slide_atual.attr('alt')
        $.post('get_banner.php', {atual: id_atual}, function(proximo){
            temp_id = proximo.split(';;')
            $slide_prox.attr('src', temp_id[0]).load(function(){
                $slide_atual.hide('fade', tempo_flash, function(){
                    $slide_atual.attr('alt', temp_id[1]).attr('src', temp_id[0]).load(function(){
                        $slide_atual.show('fade', tempo_flash)
                    })
                })
            })
        })
        ticktac();
    }, 4000);
}

このように、サーバーからの応答が完了した場合にのみ4秒のカウントが開始され、オーバーフローの問題は発生しません

于 2012-04-10T14:11:19.167 に答える