CODEWITHSUNDEEP
javascriptreactjs
user13914915
user13914915

Reputation:

How to pause for loop and then continue looping

Currently, I am trying to build a function that does the following thing:

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>
  );
};

But in the snippet the code does this now:

How can I only add one index when I have a second or third click.

Upvotes: 1

Views: 1299

Answers (5)

Derrick Zziwa
Derrick Zziwa

Reputation: 13

I think you are looking for something like this.

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;
    }
  }
}
<button onclick="clicked()">CLICK ME</button>

Upvotes: 0

biberman
biberman

Reputation: 5767

You have to save the last count i to prevent the loop to start from 0 everytime.

If you want to output the first 7 numbers inline you have to call console.log () after the for loop. But you can feed a string in the loop for the final output. (you can use a simple ternary operator to prepend the comma only if its not the first loop)

Working example: (simplified for demonstration)

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>

Upvotes: 1

Andy
Andy

Reputation: 63524

You could maintain a small array of your max values. That will save you on the conditional. Also maintain state for the minimum value.

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>

Upvotes: 1

it-person
it-person

Reputation: 108

You can make a function with a click-counter as argument. See the following pseudo-code:

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;
    }
  }
}

Depending on your use case you could use the yield keyword as a better solution.

Upvotes: 0

Mahesh
Mahesh

Reputation: 1635

You are starting value of i from 0 everytime. Instead of that you should start it from count. Try this.

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

Upvotes: 1

Related Questions