如何有效地允许用户使用 AJAX 对列表进行排序

Question

在我的应用程序中，用户有一个项目列表，他们可以按照他们喜欢的任何顺序放置这些项目。数据库架构如下所示：

Items
+ Id : int
+ Name : string
+ Order : int

所以当用户整理东西时，它会相应地设置Order 字段，以便我稍后对其进行排序。太好了。

现在，我想进行 ajax-y 排序，这样用户可以按顺序拖放项目（并使用向上/向下箭头），它会自动保存所有内容。 （如果你熟悉 Netflix，他们会做类似的事情。）

我遇到的问题是，为了在用户进行更改时保留他们的更改，我需要在他们每次执行某项操作时进行 AJAX 调用。如果用户将一个项目从位置 10 移动到位置 1，这意味着我必须在那个小 ajax 调用中更新 10 条记录。同时，用户可能又排队了 3 个 AJAX 调用来更新其他记录。

这似乎效率低下，并且可能容易出错（由于竞争条件等，如果 AJAX 调用需要很长时间。）我应该担心这个吗？有没有更有效的方法来做到这一点？如果有所作为，我预计大多数用户需要排序的项目少于 5 个。

Answer 1

由于 Javascript 无法同步代码，我同意很难实现可以确保避免竞争条件的代码，尽管我确实找到了 this article 在 Javascript 中实现互斥锁。

但是，我个人认为，与其选择可能导致竞争条件的选项，不如选择以下选项之一：

• 在项目上方创建一个保存按钮，单击该按钮会将订单保存到数据库中。
• 创建一个计时器，如果发生变化，它将每五秒（或其他任何时间）保存一次订单。您仍然需要一个保存按钮，以便用户可以强制保存。

我倾向于后者。显然，在这两种情况下，您都需要一些视觉提示，让用户知道他们有未保存的更改（例如更改项目的背景颜色）。如果您选择其中任何一个选项（例如在 Gmail 中，当您正在撰写的电子邮件中有未保存的更改时），您很可能希望实现一些确保用户想要离开页面时未保存更改的东西。