潜在的な拡張子で期限切れになるJavaScriptのアラート

Question

私はジャバスクリプトアラートを表示していますが、3秒後に各アラートが消えてしまいますが、一度にすべて消えるようになってしまいました。これ以上アラートを作成しないでください。

また、ユーザーがアラートを送信すると、アラートが消えるまで3秒間リセットされます。

今、私はsetTimeout関数を使用しています。私は99％が私の問題だと確信しています。私は何かjqueryの遅延やその他の待機関数を使用するために再構成する必要があると思います。それをして、私が探している振る舞いをまだ得ます。

HTMLは次のようになります。

<div id="site"> 
    <div class="btn btn-danger">Red Alert!</div> 
    <div id="alerts" data-count="1"> 
    </div> 
</div> 

とJavaScriptコードは次のとおりです。

$('.btn-danger').click(function(){ 
    var count = $('#alerts').data('count'); 
    var alert = '<div class="alert alert-danger" role="alert" data-dismiss="alert">' + count +'</div>'; 
    var a = $('#alerts').append(alert) 
    setTimeout(function() { $(a).hide(); }, 3000); 
    count += 1; 
    $('#alerts').data('count', count); 
}); 

JSFiddle

Final JSFiddle

Answer 1

すべてのアラートが一度消失している理由とこのコードは新しいものを追加できません：

var alert = '<div class="alert alert-danger" role="alert" data-dismiss="alert">' + count +'</div>'; 
var a = $('#alerts').append(alert) 
setTimeout(function() { $(a).hide(); }, 3000); 

変数aは個々のアラートのjQueryオブジェクトになると予想されますが、そうではありません。 $('#alerts')オブジェクト全体です。親ののアラートです。 .append()は、追加しているオブジェクトではなく、追加しているオブジェクトを返します。つまり、多くのjQuery関数のように、.append()は "ドットの左側にあるもの"を返すので連鎖可能です。

タイマーがなくなると、個々の警告を隠すのではなく、親コンテナだけを隠すだけでなく、それらをすべて隠すことになります。その後も警告コードは正常に作成されますが、親が隠れているため表示できません。

代わりに、$()コールでHTML文字列を折り返して、最初に必要なjQueryオブジェクトを作成します。その変数は$alertとします。

$('.btn-danger').click(function(){ 
    var $alerts = $('#alerts'); 
    var count = $alerts.data('count'); 
    var $alert = $(
    '<div class="alert alert-danger" role="alert" data-dismiss="alert">' + 
     count + 
    '</div>' 
); 
    $alerts.append($alert); 
    setTimeout(function() { $alert.hide(); }, 3000); 
    count += 1; 
    $alerts.data('count', count); 
}); 

ここupdated fiddleです：$('#alerts')はコード内のいくつかの場所を表示されますので、私たちは、それをしている間、そして、我々はあまりにも変数がいることをあげます。

アラートの一つの上にマウスを移動するには、あなただけのローカル変数でsetTimeout()戻り値を保存する必要がある場合にタイムアウトをリセットし、mousemoveイベントがあるとき、その変数にclearTimeout()を呼び出して、新鮮なタイマーを起動するには、このように：

$('.btn-danger').click(function() { 
    var timer; 
    var $alerts = $('#alerts'); 
    var count = $alerts.data('count'); 
    var $alert = $(
    '<div class="alert alert-danger" role="alert" data-dismiss="alert">' + 
     count + 
    '</div>' 
); 
    $alerts.append($alert); 
    startTimer(); 
    $alert.on('mousemove', startTimer); 
    count += 1; 
    $alerts.data('count', count); 

    function startTimer() { 
    clearTimeout(timer); 
    timer = setTimeout(function() { 
     $alert.hide(); 
    }, 3000); 
    } 
}); 

ここはthis version of the fiddleです。

私の最後の提案は...あなたが本当にdata-count DOM属性にcount値を格納する必要がない限り、私はそのためのJavaScript変数を使用して、単純にお勧めします：

(function() { 
    var count = 0; 
    $('.btn-danger').click(function() { 
    ++count; 
    var timer; 
    var $alerts = $('#alerts'); 
    var $alert = $(
     '<div class="alert alert-danger" role="alert" data-dismiss="alert">' + 
     count + 
     '</div>' 
    ); 
    $alerts.append($alert); 
    startTimer(); 
    $alert.on('mousemove', startTimer); 

    function startTimer() { 
     clearTimeout(timer); 
     timer = setTimeout(function() { 
     $alert.hide(); 
     }, 3000); 
    } 
    }); 
})(); 

をので、ここで実行可能なスニペットと一緒に、私のfinal fiddle for the night次のとおりです。

(function() { 
 
    var count = 0; 
 
    $('.btn-danger').click(function() { 
 
    count += 1; 
 
    var timer; 
 
    var $alerts = $('#alerts'); 
 
    var $alert = $(
 
     '<div class="alert alert-danger" role="alert" data-dismiss="alert">' + 
 
     count + 
 
     '</div>' 
 
    ); 
 
    $alerts.append($alert); 
 
    startTimer(); 
 
    $alert.on('mousemove', startTimer); 
 

 
    function startTimer() { 
 
     clearTimeout(timer); 
 
     timer = setTimeout(function() { 
 
     $alert.hide(); 
 
     }, 3000); 
 
    } 
 
    }); 
 
})();

#site { 
 
    height: 100%; 
 
    width: 100%; 
 
    position: absolute; 
 
    top:0; 
 
    left:0; 
 
    background-color: cyan; 
 
} 
 
#alerts { 
 
    position: absolute; 
 
    right:0; 
 
    bottom:0; 
 
    width: 200px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<div id="site"> 
 
    <div class="btn btn-danger">Red Alert!</div> 
 
    <div id="alerts" data-count="1"> 
 
    </div> 
 
</div>

これで、私はあなたに挑戦します。これを試してみると、理想的でないものがいくつかあることに気付くでしょう。 1つは、タイムアウトを防ぐためにマウスを動かし続ける必要があることです。このコードで行ったようにmousemoveを使用する代わりに、mouseenterとmouseleaveを使用できます。それに関連して、すべてマウスがのいずれかののアラートを超えた場合、タイムアウトを停止するのがおそらくより良いようです。そうしないと、別のアラートがクリアされたときに、マウスの上にあるアラートがその下から滑り出ることがあります。どちらもするのは難しいことではありません。

ハッピーハッキング！