How to make setTimeout in javascript work for a defined function?

Question

This is my code:

$(".btn").click(function() {
  var userChosenColor = $(this).attr("id");
  animatePress(userChosenColor);
})

function animatePress(currentColor) {
  $("." + currentColor).addClass("pressed");
}

setTimeout(animatePress,2000);

So when I press the button on my website, the "pressed" class is applied (to make it darker) but the setTimeout doesn't work to make it revert back to its original colour. I followed the layout for the functions carefully so I don't know why it's not working. Thanks in advance

Edit: This is my jquery script in my HTML, could it be because of that?

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js" charset="utf-8"></script>

the setTimeout is NOT inside the click function. Also could be toogleClass instead addClass as the timeout will not remove the class effect — Jon
– Jon, Commented Jun 24, 2020 at 7:42
Actually I just tried putting it inside the click function, and it still doesn't timeout — user13656151
– user13656151, Commented Jun 24, 2020 at 7:44
@argonx How do you want to put the timeout relative to when you clicked, if you don't start the timeout when the button is clicked? (Right now it will be scheduled as soon as the code is ran, which is presumably on page load.) — Ivar
– Ivar, Commented Jun 24, 2020 at 7:46

Jon · Accepted Answer · 2020-06-24 07:55:37Z

1

This should work:

$(".btn").click(function() {
    var userChosenColor = $(this).attr("id");
    animatePress(userChosenColor);
    setTimeout(() => animatePress(userChosenColor),2000);
})

function animatePress(currentColor) {
  $("." + currentColor).toggleClass("pressed");
}

edited Jun 24, 2020 at 7:55

answered Jun 24, 2020 at 7:50

Jon

1666 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Jon Over a year ago

@Ivar True.Edited the answer, sry

user13656151 Over a year ago

Ivar, do you mean that setTimeout does not work with change in colour?

Jon Over a year ago

@argonx I have edited 30s ago, did u try after i edited?

user13656151 Over a year ago

@Jon yes it workkss thank you! But I don't understand the "() =>" what does that mean?

Ivar Over a year ago

@argonx developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

|

Always Helping · Accepted Answer · 2020-06-24 08:05:11Z

0

You setTimeout is outside of the click which will not execute like that as its does not know where the userChoosenColor is:

Try this code should just work fine.

$(".btn").click(function() {
  var userChosenColor = $(this).attr("id");
  setTimeout(function() {
    animatePress(userChosenColor)
  }, 2000);
})

function animatePress(currentColor) {
  $("." + currentColor).toggleClass("pressed");
  console.log('I am Called')
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="btn">Click Me</button>

edited Jun 24, 2020 at 8:05

answered Jun 24, 2020 at 7:46

Always Helping

14.6k4 gold badges16 silver badges30 bronze badges

6 Comments

user13656151 Over a year ago

Now it has another effect, the "pressed" class is added after 2 seconds

Always Helping Over a year ago

@argonx is not that what you wanted to add pressed after two seconds ?

Always Helping Over a year ago

@argonx use .toggleClass() insread if you are changing the effect after two seconds. .addClass will just add and will not disappear after pressed class is added.

Always Helping Over a year ago

@argonx No worries. Glad that i could help. The accepted answer is same as mine. I said the same thing to use toggleClass() instead. Glad that we helped you :)

Always Helping Over a year ago

@argonx Thanks Heaps. I appreciate it.

|

Collectives™ on Stack Overflow

How to make setTimeout in javascript work for a defined function?

2 Answers 2

7 Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related