功能看似随机忽略线条

Question

我正在开发一个html结构，其中包含一个包含多个div元素的article。在按下按钮时，一些jquery从服务器获取新article元素的内容，将其替换为模板，并将其附加到div。 另一个函数删除所有带有类deletenext的元素获取顶部元素，使用article:first选择并向其添加deletenext类 - 此类隐藏在css中，但可以恢复。

这些与按键相关联。

设置完美无需AJAX部分 - 我可以通过从控制台调用功能或使用按键来滚动元素。当我只包含AJAX部分时，它也能完美运行。

但是当我同时使用来自控制台或来自按键的func1();func2时，我会遇到问题 - 通常ajax只会运行，并且div会持续变长，但偶尔看似随意，删除功能会删除几行。只要不在同一个运行中，就可以自己调用任一函数，也可以从控制台调用它。顺序似乎并不重要，因此似乎不是同步问题（scrollDown是所有同步函数，它应该无关紧要）

相关守则如下所示。

function scrollDown(callbackck) {
    $('article.deletenext:first').remove();
    $('.content article:first').addClass("deletenext");
};
function scrollUp() {
    $('.content article.deletenext').removeClass("deletenext");
}
function loadNext() {
    $.getJSON('test.json', function (data) {
        $('.content').append("<article><h1>" + data.title + "</h1><section class='articlecontent'>" + data.content + "<section></article>");
    });
};
$(document).bind('keydown', function(e) {
    if (e.keyCode == 75) {
        scrollUp();
    }
    else if (e.keyCode == 74) {
        scrollDown();
        loadNext();
    };
    return false;
});