# Async issue in Web Csound/p5.js **URL:** \ **Category:** Web Csound\ **Created:** [February 8, 2021, 5:47pm UTC](https://forum.csound.com/t/async-issue-in-web-csound-p5-js/146 "2021-02-08T17:47:32Z")\ **Posts on this page:** 4\ **Page:** 1
**Author:** ![JasonHallen](https://forum.csound.com/user_avatar/forum.csound.com/jasonhallen/32/32_2.png) [@JasonHallen](https://forum.csound.com/u/JasonHallen)\ **Post date:** [February 8, 2021, 5:47pm UTC](https://forum.csound.com/t/async-issue-in-web-csound-p5-js/146/1 "2021-02-08T17:47:32Z")
Hi all, Things are moving along with learning Web Csound and p5.js, but I’m still figuring out how to work with async functions and race conditions in this environment (i.e. I’m new to the web development world). [Here’s the latest iteration of my project](https://editor.p5js.org/jasonhallen/sketches/sR6nqy2zf). I’ve added a waveform visualization that uses `.decodeAudioData()` in a function called `generate_peaks()` on line 55 of setupCsound.js. In order to get the waveform to be drawn, I had to add this test condition on line 18 of the `draw()` function in sketch.js: `if (sample_list[0]) {`. When you comment out the test condition (lines 18 and 26), the waveform doesn’t get drawn and an error message says that `sample_list[0]` is undefined. Is that because there’s a race condition where `generate_peaks()` hasn’t yet finished generating the `sample_list` before the draw function is called in sketch.js? `sample_list[0]` does eventually get defined because you can explore it in the JavaScript console. While I have a workaround in line 18 of sketch.js, I wonder if there’s a better solution that defers execution of the `draw()` function until `generate_peaks()` has finished generating the `sample_list`. That seems like a basic async function solution, but I can’t figure out how to implement it. Any suggestions? Thanks for your patience and guidance as I trudge through the async world! Jason ---
**Author:** ![stevenyi](https://forum.csound.com/user_avatar/forum.csound.com/stevenyi/32/4_2.png) [@stevenyi](https://forum.csound.com/u/stevenyi)\ **Post date:** [February 9, 2021, 2:43pm UTC](https://forum.csound.com/t/async-issue-in-web-csound-p5-js/146/2 "2021-02-09T14:43:21Z")
@JasonHallen I looked at the project and it seems to be working. Is everything sorted out now or is there something that is still off? ---
**Author:** ![JasonHallen](https://forum.csound.com/user_avatar/forum.csound.com/jasonhallen/32/32_2.png) [@JasonHallen](https://forum.csound.com/u/JasonHallen)\ **Post date:** [February 10, 2021, 12:17am UTC](https://forum.csound.com/t/async-issue-in-web-csound-p5-js/146/3 "2021-02-10T00:17:45Z")
Thanks for checking in, Steven. The project is working because I added a test condition to see if `sample_list[0]` has been generated before the `draw()` function tries to use the data in the array. Without that test condition, part of the code breaks. In other words, the program needs to do some pre-processing before some of the data can be visualized. I guess I’m getting a sense for how to build a GUI that sometimes needs to process data asyncronously. My strategy (and the strategy I’ve seen in some of the Csound/p5.js examples ) is to add `if (condition)` tests to make sure p5.js doesn’t try to do something before the condition is true (i.e. the data has been processed and is ready). And then while waiting for the condition to become true I can put in some kind of “Loading…” animation. Does that seem like a reasonable approach, especially in this domain of Web Csound and js programming? Thanks! Jason ---
**Author:** ![stevenyi](https://forum.csound.com/user_avatar/forum.csound.com/stevenyi/32/4_2.png) [@stevenyi](https://forum.csound.com/u/stevenyi)\ **Post date:** [February 12, 2021, 4:12am UTC](https://forum.csound.com/t/async-issue-in-web-csound-p5-js/146/4 "2021-02-12T04:12:25Z")
Yeah, I think you got the gist of it. Just need to trace through all the pieces that need to load first and have other parts wait until that’s all prepped. 👍