Javascript ajaxjqueryremove函数运行缓慢

Javascript ajaxjqueryremove函数运行缓慢,javascript,jquery,html,ajax,Javascript,Jquery,Html,Ajax,我有一个包含项目的表和一个用于删除每个项目(行)的按钮 为此,我构建了以下ajax函数: $(document).ready(function() { $(".destroy-device").click(function(e) { e.preventDefault(); var id = $(this).attr("data-id"); $.ajaxSetup({ headers: { 'X-CSRF-TOKEN': $('m

我有一个包含项目的表和一个用于删除每个项目(行)的按钮

为此,我构建了以下ajax函数:

$(document).ready(function() {
  $(".destroy-device").click(function(e) {
    e.preventDefault();
    var id = $(this).attr("data-id");
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
        }
    });
    $.ajax({
        url: 'device/destroy/'+id,
        type: 'post',
        data: {
            _method: 'delete',
            id: id
        },
        success:function(data) {
            if($('.form-destroy').attr("data-form-id") == id) {
                $('.form-destroy[data-form-id='+id+']').closest("tr").remove();
            }
        }
    });
  });
});

我从数据库中删除设备并删除html(DOM)中的行,但是.remove()函数的运行速度很慢。单击“删除”按钮后,行在1-2秒后消失,这可能是什么原因?

一种风险更大但用户更友好的方法是在将行从数据库中删除之前将其隐藏在DOM中


如果确实遇到任何错误,则必须重新添加

一种风险更大但用户更友好的方法是在将行从数据库中删除之前对DOM隐藏该行

如果确实遇到任何错误,则必须重新添加

单击删除按钮后,行在1-2之后消失 秒,这可能是什么原因

我打赌这是因为在
ajax
调用到达成功回调之前需要1-2秒。您可以在控制台中检查响应时间。对于(chrome),只需按F12,然后转到
网络
选项卡

小的解决方法
您可以在
单击事件之后立即隐藏
tr
元素

$('.form destroy[data form id='+id+']).closest(“tr”).hide()

然后在
ajax
调用的
success
回调中删除它。(应该有一个
成功
错误
检查吗?)

如果以上不是您的解决方案,您必须提高服务器的速度

交替地
如果您只是想让用户获得流畅的体验,还可以在
表行的
左侧或
右侧添加一点加载程序
动画
。然后用户知道发生了什么。否则他可能会认为自己打错了

也许是这样的:

单击删除按钮后,行在1-2之后消失 秒,这可能是什么原因

我打赌这是因为在
ajax
调用到达成功回调之前需要1-2秒。您可以在控制台中检查响应时间。对于(chrome),只需按F12,然后转到
网络
选项卡

小的解决方法
您可以在
单击事件之后立即隐藏
tr
元素

$('.form destroy[data form id='+id+']).closest(“tr”).hide()

然后在
ajax
调用的
success
回调中删除它。(应该有一个
成功
错误
检查吗?)

如果以上不是您的解决方案,您必须提高服务器的速度

交替地
如果您只是想让用户获得流畅的体验,还可以在
表行的
左侧或
右侧添加一点加载程序
动画
。然后用户知道发生了什么。否则他可能会认为自己打错了

也许是这样的:

在客户端(JavaScript代码),没有任何东西会明显降低执行速度

表示只有在从服务器收到成功响应后才执行行上的
remove()
。 如果服务器发送、处理ajax请求以及将成功响应发送回客户端所需的时间为1-2-n秒,那么该行将在该时间之前消失

使用浏览器检查器,我将检查返回响应所需的实际时间

如果这是问题所在,您有两种选择:

1. 让服务器运行得更快。当然,如何做到这一点超出了问题的范围

2. 接受服务器“延迟”,改进界面,让用户有更好的体验。 有一项任务需要1-2秒才能完成,这并不罕见。 单击按钮后,您可以“灰显”该行或显示一些元素,让用户猜测操作正在进行。 成功后,删除该行。 失败时(代码应该处理的选项),将行重置为原始状态


旁注:根据评论,您的if语句似乎有问题。

在客户端(JavaScript代码),没有任何东西明显减慢执行速度

表示只有在从服务器收到成功响应后才执行行上的
remove()
。 如果服务器发送、处理ajax请求以及将成功响应发送回客户端所需的时间为1-2-n秒,那么该行将在该时间之前消失

使用浏览器检查器,我将检查返回响应所需的实际时间

如果这是问题所在,您有两种选择:

1. 让服务器运行得更快。当然,如何做到这一点超出了问题的范围

2. 接受服务器“延迟”,改进界面,让用户有更好的体验。 有一项任务需要1-2秒才能完成,这并不罕见。 单击按钮后,您可以“灰显”该行或显示一些元素,让用户猜测操作正在进行。 成功后,删除该行。 失败时(代码应该处理的选项),将行重置为原始状态



旁注:根据评论,您的if语句似乎有问题。

检查您的服务响应时间完成此ajax调用需要多少时间?1-2秒?如果语句似乎错误,如果他们的语句不止一个。在页面上的表单销毁,它将只对第一个语句有效。慢度将来自服务器,而不是发布的代码。因此,您需要查看服务器端代码。检查您的服务响应时间完成此ajax调用需要多少时间?1-2秒?如果陈述似乎错误,如果他们的