JQuery .post（）在.each函数中使变量具有相同的值

Question

我只是对这个问题感到困惑。我有变量值的问题，其中$.post函数与父函数$(element).each(function不同，这是我的代码：

$(document).ready(function() {
  $(".list").each(function() {
    var a = $(this).find("input.input-text").val();
    console.log(a);
    $.post("/Somewhere/path/").done(function(e) {
      console.log(a);
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="list"><input type="text" class="input-text" value="30000"></div>
<div class="list"><input type="text" class="input-text" value="20000"></div>
<div class="list"><input type="text" class="input-text" value="10000"></div>

通常会显示每个函数中a变量的值，如

30000
20000
10000

但a函数中$.post变量的值返回相同的值

10000
10000
10000

我在a函数中找到了声明$.post变量的替代方法，但还有其他解决方案吗？

Answer 1

你需要这样做

function callerFunction(a) {
    $.post("/Somewhere/path/").done(function(e) {
      console.log(a);
    });
}

$(document).ready(function() {
  $(".list").each(function() {
    var a = $(this).find("input.input-text").val();
    callerFunction(a);
  });
});

或者你必须像这样同步拨打电话

function callerFunction(lists, index) {  
  if(lists.length > index) {
      var a = $(lists[index]).find("input.input-text").val();
      $.post("/Somewhere/path/").done(function(e) {
        console.log(a);
        callerFunction(lists, index+1);
      });
   }
}

$(document).ready(function() {
    var lists = $(".list");
    callerFunction(lists, 0);
});

Answer 2

您遇到的麻烦是由于Javascript的异步性质。 $ .post调用不是以同步方式工作，因此所有闭包（输入到$.post().done()的函数）将在网络请求完成后工作。

为了更好地理解，请检查下面的小提琴。它通常将-1​​000，-1000，-1000记录到控制台但它仍然取决于网络请求的响应时间。

然后要解决这个问题，您可以将$.post调用移动到另一个函数（它创建新范围），或者同步调用而不是异步调用。

$(document).ready(function(){
$(".list").each(function(){
var a = $(this).find("input.input-text").val();
	$.get('/echo/js/?js=hello%20world!').done(function(e){
		console.info(a);
	});
	a = -1000;
});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="list"><input type="text" class="input-text" value="30000"></div>
<div class="list"><input type="text" class="input-text" value="20000"></div>
<div class="list"><input type="text" class="input-text" value="10000"></div>

Answer 3

你的代码对我有用，我只需要为post函数添加一个“真正的”路径

$(document).ready(function() {
  $(".list").each(function() {
    var a = $(this).find("input.input-text").val();
    console.log(a);
    $.post("/echo/json/").done(function(e) {
      console.log(a);
    });
  });
});

也许它有帮助：jsfiddle

输出：

(index):49 30000
(index):49 20000
(index):49 10000
(index):51 30000
(index):51 20000
(index):51 10000