如何暂停循环，然后继续循环
如何暂停循环，然后继续循环
提问于 2021-06-25 10:37:31
目前，我正在尝试构建一个功能，它可以完成以下工作：
- 首次单击: 1、2、3、4、5、6、7
- 第二次点击: 8
- 第三次点击: 9
import { FC, useState } from 'react';
export const HandOutCards: FC = () => {
const [count, setCounter] = useState(0);
function firstHandOut(counter: number) {
let maxLength = 7;
for (let i = 0; i < 10; i++) {
console.log(i);
if (i === (maxLength + counter)) {
break;
}
}
}
const counter = () => {
setCounter(count + 1);
firstHandOut(count);
};
return (
<button onClick={counter}>HandOut</button>
);
};
但是在代码段中，代码现在这样做了：
- 第1、2、3、4、5、6、7
- 第二次单击1、2、3、4、5、6、7、8
- 第三次单击1、2、3、4、5、6、7、8、9
如何在第二次或第三次单击时只添加一个索引。
回答 5
Stack Overflow用户
回答已采纳
发布于 2021-06-25 10:54:08
您必须保存最后一个计数i，以防止每次从0开始循环。
如果要内联地输出前7个数字，则必须在console.log ()循环之后调用for。但是，您可以在循环中为最终输出提供一个字符串。(只有在逗号不是第一个循环的情况下，才能使用简单的三元运算符在逗号前面加上前缀)
工作示例：(简化为演示)
let counter = 0;
let last_count = 0;
let maxLength = 7;
function firstHandOut() {
let output = '';
for (let i = last_count + 1; i < 10; i++) {
output += (i != last_count + 1 ? ', ' : '') + i;
if ((i === (maxLength + counter))) {
last_count = i;
break;
}
}
console.log(output);
counter++;
}<button type="button" onclick="firstHandOut();">test</button>
Stack Overflow用户
发布于 2021-06-25 10:47:27
您每次都是从0开始值i。相反，您应该从count启动它。尝尝这个。
for (let i = count; i < 10; i++) {
console.log(i);
if ((i === (maxLength + counter))) {
break;
}
}Stack Overflow用户
发布于 2021-06-25 11:11:12
您可以维护一个极小的最大值数组。这会让你有条件的省下来。还保持状态的最小值。
const {useState} = React;
function Example() {
const [count, setCounter] = useState(0);
const [min, setMin] = useState(1);
const max = [7, 8, 9];
function firstHandOut() {
const arr = [];
// Check the min state and the value in
// the dictionary for this count
for (let i = min; i <= max[count]; i++) {
arr.push(i);
}
console.log(arr.join(''));
// Update the min state
setMin(max[count] + 1);
}
function counter() {
setCounter(count + 1);
firstHandOut(count);
};
return (
<button onClick={counter}>HandOut</button>
);
};
// Render it
ReactDOM.render(
<Example />,
document.getElementById("react")
);<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="react"></div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/68129616
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号