Question

我正在为员工创建一个工具来创建一个＆＃34;小部件＆＃34;的仪表板。此仪表板完全可以自定义，包括显示的小部件，位置和大小。

每个小部件都是一个jquery自执行函数，可以加载它所需要的任何内容，以便创建它。

我担心的是，某些小部件可能需要从数据库中获取数据才能加载诸如已保存的链接，流行的电话号码等。这意味着如果用户的仪表板上有10个小部件，那么它将是做10次AJAX调用（假设每个人都需要访问数据库）。

首先，我怀疑这是首选但不完全确定如何处理它呢？

我的第二个问题/问题是等待加载的事情。在getMultipleScripts函数中，我有done的回调函数。这将告诉我何时获取了所有文件，因此我可以运行我的插件来启用网格功能。但是，这并不意味着每个插件都已完成其AJAX调用以获取其数据。有没有办法可以解决这个问题，这样不仅加载了文件，而且每个文件都完成了初始的AJAX调用以获取数据？

// Load an array of file names
$.getMultiScripts(moduleIncludes, 'includes/js/modules/').done(function(){
   // I can trigger the jQuery plugin here to arrange the widgets into their grid format. However, just because those plugins have been fetched doesnt mean their individual AJAX calls have all been completed. 
});

// Given an array of file names..
$.getMultiScripts = function(arr, path) {
    var _arr = $.map(arr, function(scr) {
        return $.getScript((path || "") + scr);
    });

    _arr.push($.Deferred(function(deferred) {
        $(deferred.resolve);
    }));

    return $.when.apply($, _arr);
}

建议的任何反馈都是首选。虽然上述问题是我主要关心的问题，但也可以接受有关备用设置的反馈。

想象一下，下面的每个块都是用户在其仪表板上的小部件。一个是一个简单的计算器，根本不需要与数据库进行交互，而另一个是其部门的链接列表。

Answer 1

这是我过去所做的基本例子。我不知道标准是什么，javascript不是我的强项，但这似乎对我有用。您必须知道用户在页面加载时有多少（数字计数）小部件，因此您可以将其提供给ajax success函数在完成其过程时减少的计数器。看看它是否适用于您的情况：

DEMO（稍微修改为jsFiddle工作）： https://jsfiddle.net/cbyxp9v2/

<强>的index.php

<script>
// I am just making a simple ajax object to use in this example
var aEngine =   function($)
    {
        var data;
        var func;
        var url =   '/tester.php';
        this.ajax   =   function(data,func)
            {
                $.ajax({
                    url: url,
                    data: data,
                    type: 'post',
                    success: function(response) {
                        try {
                            func(response);
                        }
                        catch(Exception) {
                            console.log(Exception.message);
                        }
                    }
                });
            };
    }
// On document load
$(document).ready(function() {
    // This is where you have to tell this function how many widgets there are
    var counter =   10;
    // This will tell the element to loop in my example but not
    // important in your case
    var counted =   counter;
    // Create instance
    var ajaxEngine  =   new aEngine($);
    // I am just doing a loop to simulate widgets being processed via ajax
    for(var i = 1; i < counted; i++) {
        ajaxEngine.ajax(
            {
                "test":"best",
                "num":i
            },
            function(response){
                var writeResp   =   JSON.parse(response);
                // This is just writing to page a random number from the PHP
                // not important, just required in this example
                $('#div'+writeResp.num).html(writeResp.msg);
                // This is more the important part
                // Here you decrease the counter by one when this widget
                // finishes it's action
                counter--;
                // This part is important. After the counter decreases to 1
                // that means that all the ajax widgets should be loaded and
                // in this case send a "done" message to the console.
                // Yours would then run your grid application
                if(counter == 1) {
                    console.log('done');
                }
            });
    }
});
</script>

<?php
// This is just for testing to simulate loaded widgets
for($i = 1; $i < 10; $i++) {
    echo '<div id="div'.$i.'">tester</div>';
}

<强> /tester.php

// This just sends back to ajax content simulating widget loading
if(!empty($_POST['test']))) {
    die(json_encode(array('success'=>true,'msg'=>rand(),'num'=>$_POST['num'])));
}

如果添加：

counter--;
if(counter == 1) {
    console.log('done');
}

进入每个单独的ajax调用是很麻烦的，我会把它放到我的aEngine中，所以它会自动发生在后台。这个想法基本上是在运行ajax之后，计数器将减少1。

创建多个jQuery / Javascript小部件

1 个答案: