使用同步ajax调用有什么弊端? [英] What are the drawbacks of using synchronous ajax call?

问题描述

这个问题肯定适用于 jQuery，但在这种情况下，我指的是 Prototype.在原型文档中它说，

This question could surely be applied to jQuery but in this case I am referring to Prototype. In the Prototype doc it says,

由于同步使用是相当令人不安，而且通常味道不好，你应该避免改变这一点.认真的.

Since synchronous usage is rather unsettling, and usually bad taste, you should avoid changing this. Seriously.

我不确定使用同步 ajax 调用的缺点是什么.似乎有很多情况你必须等待调用返回(不使用特定的回调函数).例如，我目前使用 Prototype 的 onSuccess、onFailure 和 onComplete 来处理其余的代码.

I'm not sure what the drawbacks of using a synchronous ajax call. It seems that there are many instances where you must wait for the call to return (without using the specific callback functions). For example I currently use Prototype's onSuccess, onFailure and onComplete to handle the rest of the code.

然而，我使用的网络服务(全部在内部)涵盖了大多数项目，我的任务是创建更多可重用的代码.一个示例是返回客户属性的客户类.一个简单的例子(请记住，为了简单起见，我只展示了基本功能):

However, the web services I use (all in-house) span most projects and I have been tasked with creating more reusable code. An example would be a customer class that returns customer properties. A simple example (keep in mind I am only showing the basic functions to keep it simple):

Customer = Class.create({ 

    initialize: function(customerId) { 

        new Ajax.Request('some-url', {
            method: 'get',
            parameters: {
                customerId: customerId
            },
            onSuccess: this.setCustomerInfo.bind(this)
        }

    },

    setCustomerInfo: function(response) {

        //for the sake of this example I will leave out the JSON validation

        this.customerInfo = response.responseText.evalJSON();

    } 

});

因此，使用这个简单的类，我可以在任何项目中执行以下操作来获取客户信息.

So, using that simple class I can do the following in any project to get the customer info.

var customer = new Customer(1);

//now I have the customer info
document.write(customer.customerInfo.firstName);

使用上面的代码不会打印出客户的名字.这是因为 ajax 调用是异步的.无论 Web 服务是否带回客户数据，它都会执行 document.write.但是在数据返回并设置客户变量之前，我不想做任何事情.为了解决这个问题，我将 ajax 调用设置为同步，这样浏览器将不会继续运行，直到 new Customer(1); 完成.

Using the above code will not print out the customer's first name. This is due to the ajax call being asynchronous. It will execute the document.write whether or not the web service brought back the customer data. But I don't want to do anything until the data has come back and the customer variable is set. To fix this I set the ajax call to synchronous so the browser will not continue on until the new Customer(1); is finished.

此方法似乎有效(将异步设置为 false)，但阅读 Prototype 文档让我停顿了一下.使用这种方法的缺点是什么?有没有其他方法可以做到这一点，更有效等?

This method seems to work (setting asynchronous to false) but reading the Prototype docs gives me pause. What is the drawback of using this method? Is there another way to do it, more efficient, etc?

如果您有任何反馈，我将不胜感激.

I would appreciate any feedback.

推荐答案

让我们提醒你 JavaScript 是单线程

Let's remind you that JavaScript is single-threaded

同步 IO 调用阻塞整个线程

一个简单的解决方法是通过回调使用异步风格的编程.

A simple fix is to use asynchronous style programming using callbacks.

Customer = Class.create({     
    initialize: function(customerId, cb) { 
        new Ajax.Request('some-url', {
            method: 'get',
            parameters: {
                customerId: customerId
            },
            onSuccess: (function() {
                this.setCustomerInfo.apply(this, arguments);
                cb.apply(this, arguments);
            }).bind(this)
        }
    },
    setCustomerInfo: function(response) {
        //for the sake of this example I will leave out the JSON validation
        this.customerInfo = response.responseText.evalJSON();
    }   
});

var c = new Customer(1, function() {
     document.write(customer.customerInfo.firstName);
});

这篇关于使用同步ajax调用有什么弊端?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！