Question

我对这段代码有两个问题。

1 $(container + ' meta[data-level="' + level + '"]').length == 0始终为零我知道这是因为我创建了额外的调用create_views(1);，它不应该被添加，但它无论如何都会被附加。

2 dpUniSlider不起作用，因为它没有看到通过ajax调用创建的li。如果我将它移动到成功消息它工作正常，但外部功能没有。问题是如果我将它包含在ajax成功中，它会被调用几次，因为它在循环中

//Show levels using ajax, before slider is activated

function create_views(level) {
  $.ajax({
    url: "actions.php",
    type: "GET",
    data: "show_level=" + level,
    cache: false,
    success: function (data) {
      var view = '<li data-level="' + level + '">' + data + '</li>';
      var container = ".slides_container";
      if ($(container + ' meta[data-level="' + level + '"]').length == 0) {
        $(container).append(view);
      } else { //check if element exists, if yes overwrite it.
        //$(container + ' meta[data-level="' + level + '"]').replaceWith(view);
        alert("Exists");
      }
    }
  });
}
 //Loop through all levels and display views
 //level count can be rewritten to come from DB and not be hardcoded like now
var levels = 2;
for (var i = 1; i <= levels; i++) {
  create_views(i);
} // for loop
create_views(1); //test, delete this
 //Activate slide
var unislider = $(".slides_container").dpUniSlider({
  //loop: false,
  draggable: false
});

Answer 1

为了处理多个并行异步ajax调用，你想在完成所有事情之后执行某些操作，你可以保留一个计数器并检查成功回调以查看最后一次ajax调用何时成功。

看起来像这样：

$(function() {
    var TOTAL_TASKS = 2,
        completedTasks = 0;

    function performAjaxTask(taskNumber) {
        $.ajax({
            url: url,
            type: 'GET',
            data: data,
            cache: false,
            success: function(data) {
                // Process the data

                completedTasks++;

                if (completedTasks == TOTAL_TASKS) {
                    // Perform actions that need to wait until all
                    // ajax calls have returned successfully.
                }
            }
        });
    }

    for (var i = 1; i <= TOTAL_TASKS; i++) {
        performAjaxTask(i);
    }
});

Answer 2

我相信你可以使用jQuery延迟对象来处理多个并行异步ajax调用，你想在它们成功完成后执行某些操作。

试试这个：

$(function() {
    var LEVELS = 2,
        $container = $('.slides_container'),
        deferreds = []; // This will hold the deferred objects.

    // This function returns a deferred object.
    function getViewAndReturnDeffered(level) {
        return $.ajax({
            url: 'actions.php',
            type: 'GET',
            data: 'show_level=' + level,
            cache: false,
            success: function(data) {
                var $currentView = $container.find('[data-level="' + level + '"]'),
                    $newView = '<li data-level="' + level + '">' + data + '</li>';
                if ($currentView.length > 0) {
                    $currentView.replaceWith($newView);
                } else
                    $container.append($newView);
                }
            }
        });
    }

    for (var i = 1; i <= LEVELS; i++) {
        // Put the deferred objects in the array.
        deferreds.push(getViewAndReturnDeffered(i));
    }

    // The function passed to `.done()` will execute when all the deferred
    // objects have completed successfully.
    $.when.apply($, deferreds).done(function() {
        var unislider = $container.dpUniSlider({
            //loop: false,
            draggable: false
        });
    });
});

Answer 3

<meta></meta>内有.container吗？可能不是。使用

$(container + ' li[data-level="' + level + '"]')

ajax调用和追加，不能选择附加内容或做任何事情

3 个答案: