バグテーブルに行を追加し、

Question

コードこちらのページの一番下までスクロールすると、以下の繰り返し：http://codepen.io/anon/pen/rLvBbA

を繰り返し、「行を追加」リンクをクリックしてください。多くの場合、行を追加した後にページの下にスクロールするのに数秒かかることがあります。

jqueryのアニメーションが、時間の代わりにスクロールを直ちに実行することがあるのか​​、ブラウザがすぐ下にスクロールすることがあるかどうかわかりません。 ChromeとSafari（不定期）とFirefox（別の場合は最初のページの読み込みでは動作するようですが、それ以降は動作が異なる）で動作が壊れているようです。

HTML：

<table> 
</table> 

<a href="javascript:(addRows())">Add rows</a> 

CSS：

body { 
    padding: 100px; 
} 

td { 
    padding: 10px 20px; 
    border: 1px solid #ccc; 
} 

tr.level-WARN { 
    background-color: #FFB347; 
} 

Javascriptを：

$(document).ready(function() { 
    addRows(); 
    addRows(); 
    addRows(); 
    addRows(); 
}); 

function addRows() { 
    for (var x = 0; x<5; x++) { 
    var row = $('<tr/>'); 
    row.append($('<td/>').text('This is some table cell content.')); 

    if (Math.floor(Math.random() * 10) == 0) { 
     row.addClass('level-WARN'); 
    } else { 
     row.addClass('level-INFO'); 
    } 
    $('table').append(row); 
    } 

    $("html, body").animate({ scrollTop: $(document).height() }, 3000); 
} 

Answer 1

お電話：

addRows(); 

前のアニメーションを終了できませんでしたので、現在実行中のアニメーションを停止して新しいアニメーションを開始するためにjQuery stopを追加することができます。

マイスニペット：

function addRows() { 
 
    for (var x = 0; x<5; x++) { 
 
    var row = $('<tr/>'); 
 
    row.append($('<td/>').text('This is some table cell content.')); 
 

 
    if (Math.floor(Math.random() * 10) == 0) { 
 
     row.addClass('level-WARN'); 
 
    } else { 
 
     row.addClass('level-INFO'); 
 
    } 
 
    $('table').append(row); 
 
    } 
 

 
    $("html, body").stop().animate({ scrollTop: $(document).height() }, 3000); 
 
} 
 
$(function() { 
 
    addRows(); 
 
    addRows(); 
 
    addRows(); 
 
    addRows(); 
 
});

body { 
 
    padding: 100px; 
 
} 
 

 
td { 
 
    padding: 10px 20px; 
 
    border: 1px solid #ccc; 
 
} 
 

 
tr.level-WARN { 
 
    background-color: #FFB347; 
 
}

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> 
 

 
<table> 
 
</table> 
 

 
<a href="javascript:(addRows())">Add rows</a>