Javascript 将行追加到表中并滚动到页面底部的错误

在此处输入代码，并在下面重复：

反复单击“添加行”链接。添加行后，通常需要几秒钟才能滚动到页面底部，有时会立即滚动到页面底部

我不知道是jquery的动画有时会立即滚动而不是持续一段时间，还是浏览器有时会立即滚动到底部？在Chrome和Safari上，这种行为似乎以一种方式被打破（不规则），在Firefox上则有所不同（在第一页加载时似乎有效，但在第一页加载后就崩溃了）

HTML:

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);
}

$（文档）.ready（函数（）{
addRows（）；
addRows（）；
addRows（）；
addRows（）；
});
函数addRows（）{
对于（var x=0；x当您调用：

addRows();

上一个动画无法完成，因此您可以添加一个，以停止当前正在运行的动画并启动一个新的动画

我的片段：


函数addRows（）{
对于（var x=0；x
$(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);
}

addRows();