Jquery Ajax 调用未在 for 循环中执行

Question

使用此功能

  function readPinMode(callback,pin){
     $.ajax({
        type: 'GET',
        url: path,
        data: {
        'funct': "readPinMode", //function included and working ou of loops
        'pin': pin,
        'php': 0
     },
     success: function (result) {
        //console.log(result);
        callback(result);
     },
        error: function (xhr, textStatus, error) {
        console.log(xhr);
        console.log(textStatus);
        console.log(error);
    }
   });
 };

这样一来，根本就什么都不做：

      $( document ).ready(function() {
  <?php
  $js_array = json_encode($GLOBALS['gpio']); // got from included file, working
  echo "var pins = ". $js_array . ";\n";
  ?>
  console.log( "Document ready." );
  for (i = 0; i < pins.length; i++) {
        var mode = "m" + pins[i];
        function initMode(){
        readPinMode(function(ret){
        console.log(ret);
        $(mode).text(ret);
        console.log(mode);
      }, pins[i]);
    };
  }

它进入了for循环（我可以登录控制台mode和pins[i]，它们正在工作）但该函数似乎没有被调用。 控制台不显示任何内容。

有没有办法解决这个问题？ 谢谢

Answer 1

我建议不要使用需要适当关闭的真正循环，而是在成功时再次运行

<?php
  $js_array = json_encode($GLOBALS['gpio']); // got from included file,  working
  echo "var pins = ". $js_array . ";\n";
?>
var cnt = 0;
function readPinMode(){
  if (cnt>=pins.length) return;      
  $.ajax({
    type: 'GET',
    url: path,
    data: {
    'funct': "readPinMode", //function included and working ou of loops
    'pin': pins[cnt],
    'php': 0
   },
   success: function (result) {
      //console.log(result);
      $("#mode").append(result)
      cnt++;
      readPinMode();
   },
   error: function (xhr, textStatus, error) {
    console.log(xhr);
    console.log(textStatus);
    console.log(error);
   }
 });
}
$(function() { readPinMode(); }); 

概念证明：

var pins = ["pin1", "pin2", "pin3"];
var cnt = 0;

function readPinMode() {
  if (cnt >= pins.length) return;

  document.write('<br/>pin:' + pins[cnt]); // your Ajax

  cnt++;
  readPinMode();
}
$(function() {
  readPinMode();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Answer 2

使用回调函数并没有错，但是您确实错过了一些事情。您忘记调用 initMode 函数，mode 应该是您提到的 ID：

<script>
    function readPinMode(callback, pin) {
        $.ajax({
            type: 'GET',
            url: 'SGWEB/header.php',
            data: {
                'funct': "readPinMode", //function included and working ou of loops
                'pin': pin,
                'php': 0
            },
            success: function (result) {
                callback(result);
            },
            error: function (xhr, textStatus, error) {
                console.log(error);
            }
        });
    }

    function initMode(mode, pin) {
        readPinMode(function (ret) {
            $(mode).text(ret);
        }, pin);
    }

    $(document).ready(function () {
        var pins = <?= json_encode($GLOBALS['gpio']) ?>;
        for (i = 0; i < pins.length; i++) {
            var mode = "#m" + pins[i];
            initMode(mode, pins[i]);
        }
    });
</script>

这是我创建的FIDDLE，以便您了解它的工作原理。

Answer 3

我认为它的语法错误，试试这个代码

console.log( "Document ready." );
  for (i = 0; i < pins.length; i++) {
        var mode = "m" + pins[i];       
        readPinMode(function(ret){
        console.log(ret);
        $(mode).text(ret);
        console.log(mode);
      }, pins[i]);       
  }

我删除了function initMode()，因为它一遍又一遍地创建相同的函数定义，覆盖了现有的函数，而且它很混乱。您不应该在循环中定义函数，因为最终函数将属于最后一个循环。在这种情况下，您也无需在循环内定义函数。

这是Working Prototype Fiddle