Javascript在继续之前等待结果

Posted 2023-04-19

【中文标题】Javascript在继续之前等待结果

【英文标题】：Javascript Waiting for result before continuing

【发布时间】：2018-11-21 10:31:27

【问题描述】：

我是 javascript 新手，想在我能走路之前跑步，但我必须产生一个结果，所以我在这里。

我以为我已经在另一个问题中找到了答案，但它并没有像预期的那样对我起作用，下面是我的脚本，其功能是查看 SharePoint 列表并将一些值返回到 3 个数组中，然后我使用这些数组提供数据来完成一些图表数据。

                    <script>
                    // load all necessary sharepoint javascript libaries
                    SP.SOD.executeFunc('sp.js', 'SP.ClientContext', function () 

                        // load the sharepoint list.
                        loadSharepointList();
                    );
                    var arrPlan = new Array()
                    var arrActual = new Array()
                    var arrMonth = new Array()


                    // loads the sharepoint list
                    function loadSharepointList() 

                        // create the sharepoint content.
                        var context = SP.ClientContext.get_current();

                        // get the list by the title.
                        var list = context.get_web().get_lists().getByTitle('Package');

                        // create the query.
                        var caml = new SP.CamlQuery();
                        caml.set_viewXml(''); 

                        // get the list items asynchronously
                        var listItems = list.getItems(caml);
                        context.load(listItems , 'Include(Title,Month,Plan,Actual)');
                        context.executeQueryAsync(

                            // success delegate
                            Function.createDelegate(this, function() 

                            // loop through the items.
                                var listEnumerator = listItems.getEnumerator();
                                while (listEnumerator.moveNext()) 

                                    // get the current list item.
                                    var listItem = listEnumerator.get_current();

                                    // get the field value.
                                    var titleValue = listItem.get_item('Month');
                                    var monthValue = listItem.get_item('Month');
                                    var planValue = listItem.get_item('Plan');
                                    var actualValue = listItem.get_item('Actual');
                                    //alert(monthValue);
                                    arrPlan.push(planValue);
                                    arrActual.push(actualValue);
                                    arrMonth.push(monthValue);
                                    //alert(arrMonth);

                                

                            ),

                            // error delegate
                            Function.createDelegate(this, function() 
                                alert('Error fetching data from Sharepoint!');      
                            ));

                    

                            //var labels = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October"];
                            var netpphcanvas = document.getElementById("pphchart");
                            var planData = 
                                label: 'Plan',
                                fill: false,
                                data: [1.06,1.58,1.74,1.62,1.50,1.37,1.36,1.44,1.84,1.76],
                                backgroundColor: 'rgba(133, 133, 133, 1)',
                                borderColor: 'rgba(133, 133, 133, 1)',
                                borderWidth: 3,
                                yAxisID: "y-axis-region"
                            ;
                            var actualData = 
                                label: 'Actual',
                                fill: false,
                                data: [1.37,1.65,1.84, 1.78,1.55, 1.74,1.57, 1.74,1.90,1.63],
                                backgroundColor: 'rgba(99, 132, 0, 0.6)',
                                borderColor: 'rgba(99, 132, 0, 0.6)',
                                borderWidth: 3,
                                yAxisID: "y-axis-region"
                            ;
                            //********This is the part I am using for testing
//***********
                            var netpphData = 
                                //labels: labels,
                                labels: arrMonth,
                                datasets: [planData,actualData]
                                            ;
                            var netdelOptions = 
                            scales: 
                                xAxes: [
                                    barPercentage: 1,
                                    categoryPercentage: 0.6
                                ],
                                yAxes: [
                                    id: "y-axis-region"
                                ]
                            ,
                            elements: 
                                line: 
                                    tension: 0, // disables bezier curves
                                
                            ,
                            title: 
                                display: true,
                                text: 'Net-Delivered PPH',
                                fontSize: 12
                            ,
                            legend: 
                                display: true,
                                labels: 
                                    fontColor: '#000',
                                    fontSize: 12
                                
                            


                        ;

                        var lineChart = new Chart(netpphcanvas, 
                            type: 'line',
                            data: netpphData,
                            options: netdelOptions
                        );
                    </script>

我正在尝试使用返回的数组来完成图表的数据和标签部分，为了测试这一点，我从每月数据开始，在这部分代码中检索...

context.executeQueryAsync(

                        // success delegate
                        Function.createDelegate(this, function() 

                        // loop through the items.
                            var listEnumerator = listItems.getEnumerator();
                            while (listEnumerator.moveNext()) 

                                // get the current list item.
                                var listItem = listEnumerator.get_current();

                                // get the field value.
                                var titleValue = listItem.get_item('Month');
                                var monthValue = listItem.get_item('Month');
                                var planValue = listItem.get_item('Plan');
                                var actualValue = listItem.get_item('Actual');
                                //alert(monthValue);
                                arrPlan.push(planValue);
                                arrActual.push(actualValue);
                                arrMonth.push(monthValue);
                                //alert(arrMonth);

                            

                        ),

我已经使用 alert 方法验证了这项工作，它确实将月份返回到名为 arrMonth 的数组中

但是，脚本的其余部分似乎在访问此数据源并填充 arrMonth 之前运行。

我也通过使用另一个名为标签的数组并手动归档它来检查这一点，它可以正常工作。

我认为这是因为获取数据的函数被异步调用了

context.executeQueryAsync(

但是，我将其更改为context.executeQuery(，仍然得到与检索数据之前页面加载相同的结果

很明显，我遗漏了一些东西，如果有任何帮助，我将不胜感激

亲切的问候 德里克

【问题讨论】：

请格式化您的代码

【参考方案1】：

您需要链接承诺以确保所有这些都按顺序运行。

这两个链接将对您有所帮助：

A synchronous Breeze ExecuteQuery

What does the function then() mean in JavaScript?

这是关于 Promise 链接的有用教程。 https://javascript.info/promise-chaining

【讨论】：

这肯定是朝着正确的方向发展，似乎确切的语法不一样，我认为这是由于我使用 SharePoint 和 SPClientContext.Load 方法，但是想法是一样的，这样做它是否有效，如果无效，请执行此操作...非常感谢您的帮助！

我可能已经谈过了，我认为我的问题实际上是何时调用该进程，我的意思是它会在查询成功时运行 while 语句来填充数组并且仍然继续在 while 完成之前尝试在图表中使用该数组。如何让脚本创建图表仅在 while 循环完成后运行？

您需要将每个步骤放入一个 Promise 中并将这些 Promise 链接起来，以便每个步骤仅在前一个步骤完成后才会执行。这是关于承诺链的教程：javascript.info/promise-chaining

我现在对此一无所知，只是在黑暗中拍摄，是否有人可以使用我拥有的代码给我一些指导