버그 테이블에 행을 추가하고

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

자바 스크립트 :

$(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>