Javascript 拖放后重复记录&;拖放和AJAX保存

Javascript 拖放后重复记录&;拖放和AJAX保存,javascript,ajax,duplicates,Javascript,Ajax,Duplicates,我正在努力解决我正在开发的web应用程序的一个概念问题。 该应用程序允许用户拖放DOM元素(如注释、列表和图像)。 将元素从菜单拖动到一张纸上。 删除一个元素后,应用程序将向服务器发出AJAX调用,以保存该元素(位置、颜色等) 服务器使用一个id进行应答,然后将该id作为其id属性保存到DOM元素中。 当您再次移动该元素时,将进行相同的AJAX调用,但使用其id 但问题是,如果我在放置区域快速放置一个新元素,然后再次移动它,它会创建重复的条目,因为第一个AJAX调用尚未完成,而第二个AJAX调用

我正在努力解决我正在开发的web应用程序的一个概念问题。 该应用程序允许用户拖放DOM元素(如注释、列表和图像)。 将元素从菜单拖动到一张纸上。 删除一个元素后,应用程序将向服务器发出AJAX调用,以保存该元素(位置、颜色等) 服务器使用一个id进行应答,然后将该id作为其id属性保存到DOM元素中。 当您再次移动该元素时,将进行相同的AJAX调用,但使用其id

但问题是,如果我在放置区域快速放置一个新元素,然后再次移动它,它会创建重复的条目,因为第一个AJAX调用尚未完成,而第二个AJAX调用没有id(因为它必须来自服务器)

下面是用于保存元素的简化javascript代码示例:

function saveObject(object,action){

    var params = {
        x : object.position().left,
        y : object.position().top,
        w : object.width(),
        h : object.height(),
     };

    if(object.attr("id")){
         params.id = object.attr("id");
    }

    $.post("/save_object",params,function(data){
        if(data.success){
            object.attr("id",data.data);
        }
    });

}
在服务器端,我只需检查一个id,然后使用该id运行“创建”函数或“修改”函数

这是非常具体的,我已经看过很多关于ajax复制的帖子,但是在这里设置一个标志并没有帮助。我不能阻止发出AJAX请求,因为它不应该阻止任何UI元素,我也不想丢失任何保存事件。我需要遵守一些限制,因为这个页面是动态的,同一页面上的用户可以看到其他用户的事件


我将非常感谢您在这一点上给出的任何答案。

为了让这一切顺利进行

1.在先前的请求完成之前,您必须阻止拖放功能

2.如果提出新请求,则中止先前的请求

您可以有一个队列逻辑…您可以将所有请求存储在一个数组中…一个xmlHTTP对象数组。
然后,您可以选择在队列中发送ajax请求,或者一次只发送一个请求,同时放弃所有其他请求。

有几种不同的方法可以解决这个问题,我让您选择一种可能更适合您的应用程序的方法

选项一是通过将请求存储在一个数组中,将请求排入服务器队列。然后,您将拥有一些逻辑,可以逐个发送请求


选项二是使用GUID而不是自动递增id将对象id移到客户端。然后,您可以将这些内容保存到服务器,而无需担心复制或覆盖。我还建议使用MVC来保持逻辑的有序性,例如backbone.js。

关于第二点,你能更具体一些吗?第一个选项在这里绝对不是一个选项。我绝对无法阻止使用实际的应用程序机制发出请求。选项2的问题是,应用程序现在可以与整个基础设施一起使用,无法以这种方式进行重构。选项1可能会达成协议,但这样做可能会使应用程序失去响应能力和活力。当然,你们在这里看不到所有东西,但我不能更详细地描述它:(我认为如果你只是重写你的应用程序以接受来自客户端的ID,而不是在服务器上创建ID,你应该可以。我怀疑这会是一个巨大的改变,尽管我可能错了。问题是我们的移动应用程序也以这种方式工作,我们负担不起改变,因为这是DB改变以及服务器和appO,我建议选择那么一个。关于您对响应性的担忧,我高度怀疑是否会有任何明显的影响。我不认为用户将形状拖到网格中的速度会如此之快,以至于导致请求的备份日志。我将尝试看看我是否可以做些决定性的事情