.clear() not working

[KatherineSantore]

When I try to call .clear() nothing happens and the confetti remains running. I try and call in in a Set Timeout function like this:

const confettiSettings = { target: 'my-canvas' }
const confetti = new ConfettiGenerator(confettiSettings)
const canvas = $('#my-canvas')
const confettiRain = function () {
  confetti.render()
  setTimeout(() => {
    confetti.clear()
  }, 5000)
}

Can you show some examples of how you one would call this?

[Agezao]

Hello @katherineward , thanks for opening the issue.

Turns out it was a bug after we changed the way the lib renders the confetti. It was changed from setTimeout() to requestAnimationFrame(), but the clear() method wasn't changed to follow along.

I've fixed this issue and uploaded a new version of the lib -> 0.0.13. And I've also added a new clear() routine to the tests I run before publishing a new version.

(Fixed with commit cd783d9 )

I've also tested your snippet with the new 0.0.13 and everything went well:
https://jsfiddle.net/2f74eh3c/20/

Can you please update your confetti-js to 0.0.13 and give me a feedback if everything went well?

Thanks again for opening this issue!

[KatherineSantore]

Hi @Agezao thanks for responding! I have uploaded the new version and can get .clear() to work in the console but not in my setTimeout function. I will keep working on it because I think the issue is on my end.

[Agezao]

Hi!

Nice to hear that it start working. I'll close this issue.

About the .clear() inside setTimeout(), check the example at the jsfiddle I've posted above, there is a similar code that is working properly.

But, one hint that may help,
Try changing this:

setTimeout(() => {
    confetti.clear()
  }, 5000)

To this:

setTimeout(function() {
    confetti.clear()
  }, 5000)

JS gets messy with its scope when you pass an arrow function () => {} instead of a regular function function() {}

More on this:
https://stackoverflow.com/questions/38127635/thisarg-of-array-foreach-does-not-reference-as-expected/