Question

目前，我正在尝试构建一个执行以下操作的函数：

第一次点击：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

如何在第二次或第三次点击时只添加一个索引。

Answer 1

您必须保存最后一次计数 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>

Answer 2

您每次都从 0 开始 i 的起始值。相反，您应该从 count 开始它。试试这个。

for (let i = count; i < 10; i++) {
  console.log(i);
  if ((i === (maxLength + counter))) {
    break;
  }
}

Answer 3

您可以维护一小部分最大值。这将节省您的条件。同时保持状态为最小值。

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>

Answer 4

您可以创建一个以点击计数器为参数的函数。请参阅以下伪代码：

function name(var clickCount) {
  let startVal = 0;

  switch (clickCount) {
    case 1:
      startVal = 0;
      break;
    case 2:
      startVal = 8;
      break;
    case 3:
      startVal = 9;
      break;
  }

  for (let i = startVal; i < 10; i++) {
    console.log(i);
    if ((i === (maxLength + counter))) {
      break;
    }
  }
}

根据您的用例，您可以使用 yield 关键字作为更好的解决方案。

Answer 5

我认为您正在寻找这样的东西。

<button onclick="clicked()">CLICK ME</button>



<!-- JAVASCRIPT CODE -->
<script>

i=1;
counter = 0;
maxLength = 7;

if(counter>0){
counter = maxLength+1;
}

function clicked(){
 counter = 1;

if(counter >= maxLength){
    i = counter;
}

for (i; i < 10; i++) {
  if(i<maxLength){
  console.log(i);
  }
  else{
      console.log(i++);
      break;
  }

}
}

</script>

如何暂停循环然后继续循环

5 个答案: