Javascript ajax 回调使项目列表闪烁

Question

我有一个简单的提醒列表，用户可以一次单击并拖动到“删除拖放区”中。它对我的 Webmatrix webservice 进行 ajax 调用以删除该项目。这一切都很好。但是，在 javascript 或 ajax 回调中，我正在检索剩余的项目并将它们显示回列表。出于某种原因，当此过程发生时，列表会闪烁，然后显示新更新的数量。它有点偷走了漂亮的ajax效果。剩下的项目可以向上滑动以填补被拖走的项目留下的空白。任何帮助都会很棒，非常感谢！

这是 jsFiddle 上的代码：（注意：它不是一个“工作”的小提琴示例。只是放置所有代码 sn-ps 的好地方）：

http://jsfiddle.net/cpeele00/4ugBt/

Answer 1

您获得了闪存，因为您正在清除整个列表然后重新填充它。

var refreshReminderList = function(data) {
    $('#reminders-list').empty();
    $('#reminders-listTmpl').tmpl(data).appendTo('#reminders-list');
};

而不是清空它 - 遍历列表并删除任何不在新数据列表中的元素。看起来您返回的是实际的 html，而不是返回一个 id 列表（或一些标识符。

//pseudocode
$('reminder-list li').each( function(){
     //if not in data list
     $(this).slideUp();
});