javascript - 如何在jquery循环中单击时一一获取值？

Question

实际上，我创建了一个 for 循环，它工作正常，但现在我想在单击按钮时一一获取循环值，但我无法获取。有什么问题吗？

当我点击按钮时，我会直接得到10，但我想一个接一个地得到，就像我第一次点击按钮时，它会是2，当我点击时，它会是3。

 $(document).ready(function(){
var i;
$('button').click(function(){
         for( i=1; i<=10; i++)
             $(this).text(i);
     });
    alert(i);
    })

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<button>1</button>

您的回答将不胜感激!

Answer 1

您不能为此使用 for 循环(除非您 await 构造 Promises，这有点复杂) - 相反，只需在每次处理程序调用时递增并提醒 i，直到第 10 次:

let i = 2;
$('button').click(function() {
  if (i <= 10) {
    console.log(i);
    $(this).text(i);
    i++;
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<button>1</button>

for 循环中的 Promise 方式，如果您好奇的话:

const button = $('button');
let i = 2;
const resolves = [];
const promises = Array.from(
  { length: 10 },
  (_, i) => new Promise((resolve) => {
    resolves.push(resolve);
  })
);
(async () => {
  for (let i = 0; i < 9; i++) {
    await promises[i];
    button.text(i + 2);
  }
})();

button.on('click', () => {
  if (resolves.length) resolves.shift()();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<button>1</button>