Javascript ajax回调使项目列表闪烁

Javascript ajax callback makes items list flicker

本文关键字：列表 闪烁 项目 ajax 回调 Javascript      更新时间：2023-09-26

我有一个简单的提醒列表，用户可以每次点击并拖拽一个到"删除拖放区"。它向我的Webmatrix webservice发出一个ajax调用来删除项目。这一切都很好。但是，在javascript或ajax回调中，我将检索剩余的项目并将它们显示回列表。由于某些原因，当此过程发生时，列表闪烁，然后显示新更新的数量。它有点偷走了漂亮的ajax效果。如果剩下的项目可以向上滑动，以填补被拖走的项目留下的空白，那就太好了。任何帮助将是令人敬畏的，非常感谢!

下面是jsFiddle的代码:(注意:这不是一个"工作"的例子。只是一个放置所有代码片段的好地方):

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

你得到flash，因为你正在清除整个列表，然后重新填充它。

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();
});
相关文章：