Javascript每个循环问题答案

【问题标题】：Javascript each loop issuesJavascript每个循环问题
【发布时间】：2011-07-28 16:05:44
【问题描述】：

我遇到了一个奇怪的问题，我想获得一些专业的反馈。

我正在创建一个 CRM 应用程序，其中有一个带有预览按钮的表单。当按下预览按钮时，我的函数首先通过 Ajax 将表单的所有字段保存到数据库中，然后提交表单以供预览。

表单字段存储在一个数组中（因为这些字段会更改）。我正在使用 jQuery.each(myArray, function(index, value) 循环数组。

问题是表单在循环执行之前提交。如果我在循环中添加警报，或者我在 document.submit() 中添加设置超时，一切正常。

我想知道，为什么在转到代码的下一行之前循环没有完成。

这是我的代码。

var myArray = ['sub','msg','pic','field4','field5','field6','field7'];
jQuery(document).ready(function($){
  $.each(myArray, function(index, value) {
       SaveFields(value); // my function that saves to db via Ajax call
     });
  });

//document.formName.submit(); // this submits the form before .each loop can execute
eval("setTimeout('document."+formName+".submit()', 700)"); // THIS WORKS AS INTENDED

我还尝试对数组项进行计数，并像这样在循环中添加了 submit()...

var ArrCount = myArray.length - 1;

 jQuery(document).ready(function($){
   $.each(myArray, function(index, value) {
      var saveIt = SaveFields(value);

        if (ArrCount == index){
        document.formName.submit(); // this also submits the form before .each loop can execute
         }

    });
  });

同样的结果！它只适用于 alert 或 setTimout！

感谢任何帮助，因为我真的很想知道为什么循环没有完成，然后再转到下一行。

【问题讨论】：

SaveFields 有什么作用？您似乎在 AJAX 请求返回之前提交了表单。
SaveFields 是一个简单的基于 jQuerry 的 ajax 函数，一次存储一个字段。
我想过这个！在 AJAX 请求返回之前提交表单，所以我将 SaveFields ajax 代码放入 .each 循环中，希望循环将遍历每个项目的代码！....但没有做出任何不同得到相同的结果！！！
谢谢！将 async: false 添加到 ajax 调用解决了问题！

标签： javascript forms loops submit each

【解决方案1】：

jQuery.ready 函数使您的循环在 DOM 加载并准备就绪后执行。由于您的 document.formName.submit() 在 ready 调用之外，它会立即执行。尝试将其移动到 ready 调用中，如下所示：

var myArray = ['sub','msg','pic','field4','field5','field6','field7'];
jQuery(document).ready(function($){
  $.each(myArray, function(index, value) {
    SaveFields(value); 
  });
  document.formName.submit(); 
});

【讨论】：

根据其他回复，这将使表单在页面加载后立即提交。如果您希望仅在单击按钮时发生这种情况，则应将 jQuery(document).ready 替换为表单的提交处理程序。
我试过了，表单不会提交，所以添加了eval()，然后表单在循环完成之前提交。添加了 setTimout 并按预期工作。所以内外的行为都是一样的！
仅供参考，上面的代码在一个函数内部，当点击按钮时激活。
如果 SaveFields 执行 AJAX 调用，这些调用是异步的，这意味着无论是否返回，代码都会继续执行。您必须 a) 使调用同步，以便在它们完成之前不会调用 form.submit，或者 b) 将 form.submit 附加到 AJAX 调用的 onComplete 事件并以某种方式跟踪有多少其中已完成，只有在所有元素都完成保存后才执行提交
感谢您的解释！你能告诉我如何使通话同步吗？或者在这种情况下如何使用 onComplete？

【解决方案2】：

您的代码的方式是，您在页面加载时（或在计时器或警报之后）执行该功能，似乎您需要在提交事件时执行此操作。像这样的东西应该可以工作：

$("#formElementId").submit(function() {
  $.each(myArray, function(index, value) {
       SaveFields(value); // my function that saves to db via Ajax call
     });
  });
});

【讨论】：

那么你的函数可能有错误。你用的是chrome还是firefox+firebug？你能说出 javascript 控制台上出现的警报吗？

【解决方案3】：

jQuery .ready() 函数是一个事件处理程序，仅在加载 DOM 时触发。因为 submit() 函数是在 ready() 块之外调用的，所以一旦处理程序被加载，而不是在它触发时，执行就会传递给它。

【讨论】：

【解决方案4】：

您需要将保存数据方法设为表单 onSubmit 的处理程序：

<form id="myForm" ... onsubmit="return saveAndLoadPreview(this, window.event)">

...

function saveAndLoadPreview(sender, evt){
    // ajax-post the data
    return true;
}

【讨论】：

【解决方案5】：

你应该做的是为表单提交函数设置一个事件处理程序

例如，

$(document).ready(function($){

$("#yourForm").submit(function (e) {

e.preventDefault();

$.each(myArray, function(index, value) {
       SaveFields(value); // my function that saves to db via Ajax call
     });
  });

$("#yourForm").submit(); // or using your own $.ajax submit call

});

【讨论】：