运行 AJAX 函数的多个实例 - 仅第二个实例更新

running multiple instances of ajax function - only second instance updates

本文关键字：实例 第二个 更新 AJAX 函数 运行      更新时间：2023-09-26

我在调用同一 Ajax.Request 函数的多个实例时遇到困难。 （我使用的是原型框架）。这是函数：

function send_SMS(id)
{
    status_id = 'status_link_' + id;
    new Ajax.Request('sendSMS.php', 
    {
        method:'post',
        parameters: {link_id: id},
        onCreate: function(){
            $(status_id).update("sending...");
        }, 
        onSuccess: function(transport){
            if (transport.responseJSON.success) {
                $(status_id).update("sent");
            } else {
                $(status_id).update("unable to send");
            }
        },
        onFailure: function(){ 
            $(status_id).update("unable to send");
        }       
    });
}

如果我使用 2 个不同的 ID 号调用此函数两次，即：

send_SMS("1");
send_SMS("2");

只有第二个 ID 由 onSuccess 函数更新。 sendSMS.php 文件成功运行了两次（顾名思义，它发送了一条 SMS 消息，实际上 2 条消息已成功发送），但 onSuccess 函数似乎只被调用了第二次。

JavaScript是否混淆了2个实例？

我认为这是因为status_id是一个全局变量，因此在调用其引用的回调中输入您的两个调用的上下文中：

onSuccess: function(transport){
        if (transport.responseJSON.success) {
            $(status_id).update("sent");
        } else {
            $(status_id).update("unable to send");
        }
    }

问题是，onSuccess 回调将在调用时编译，并在那时使用其上下文进行编译。在那一刻，status_id将等于"status_link_2"，因为您对send_SMS("2");的调用最有可能在第一个sms_send呼叫返回之前出现。

解决方案是：

    在
  • AJAX 调用中发送 ID，并在响应中检索它以构建status_id变量，或者
  • 使用同步模式，以便 SMS1 返回在调用 SMS2 之前返回。

这是工作函数： 

function send_SMS(id)
{
    new Ajax.Request('sendSMS.php', 
    {
        method:'post',
        parameters: {link_id: id},
        onCreate: function(){
            $('status_link_' + id).update("sending...");
        }, 
        onSuccess: function(transport){
            if (transport.responseJSON.success) {
                $('status_link_' + id).update("sent");
            } else {
                $('status_link_' + id).update("unable to send");
            }
        },
        onFailure: function(){ 
            $('status_link_' + id).update("unable to send");
        }       
    });
}
相关文章：