javascript - 如何组合从不同的 JS 文件对 Ajax 数据库的多个调用

Question

我的文件中有一些进行 Ajax 调用的代码。该文件被多个其他文件作为函数调用，每次都会创建一个新实例。

这是正在调用的 JS 代码:

define(["underscore", "homeop", "domReady!"],
    function (_, homeop, domready) {
         
        var timeout = 500;
        return function (opUrl, opList, onCallback) {

            // IRRELEVANT CODE 
          
          var getFetch = function (optionName) {
                    $.ajax({
                        url: optionsUrl,
                        data: { optionNames: [optionName] }, 
                        type: "POST",
                        dataType: "json",
                        async: false,
                        traditional: true,
                        success: function (data) {
                            _.each(data, function (optionData, optionName) {
                                if (homeop.globalCache[optionName] === null) {
                                    homeop.globalCache[optionName] = optionData;
                                }
                            });
                            
                        },
                        error: function (message) {
                            console.error(message.responseText);
                        }
                    });
                };
          
          self.getInfo = function (optionName) {
            if (homeop.globalCache[optionName] === undefined) {
                    if (!_.contains(homeop.getOption(), optionName)) {
                        getFetch(optionName);
                    }
              
              // MORE IRRELEVANT CODE GOES HERE

          
          

在其他JS文件中，我调用get函数；例如

var these = new getOptions(optionsUrl, optionsList, onLoadCallback);
var getOpt = these.get(OptionsUrl);

问题是我多次调用从数据库获取信息，导致多次调用我的 JS 文件。 JS 文件的每个新实例都会创建一个 ajax 调用。

有没有办法等待所有调用完成然后从数据库获取数据？换句话说，我如何才能以某种方式将所有调用合并到我的“getOption.js”？

谢谢

Answer 1

试试这个..你也可以实现队列来代替堆栈

var optionStack = [];
var isAvailable = true;
var getFetch = function (optionName) {
  if(isAvailable){
      isAvilable = false; // function not available now
  }
  else {
    optionStack.push(optionName)
    return;
  }
  $.ajax({
    url: optionsUrl,
    data: { optionNames: [optionName] }, 
    type: "POST",
    dataType: "json",
    async: false,
    traditional: true,
    success: function (data) {
      _.each(data, function (optionData, optionName) {
        if (homeop.globalCache[optionName] === null) {
          homeop.globalCache[optionName] = optionData;
        }
      });

    },
    error: function (message) {
      console.error(message.responseText);
    },
    done: function (){
      isAvailable = true;
      if(optionStack.length > 0){
        getFetch(optionStack.pop());
      }
    }
  });
};