PricingDocsAcademy
Bluesky ...
Wed, Dec 11, 10:16 PM

Help on Sleep behaviour

  • Tom Ireland

    2 months ago

    I'm trying to debounce text input storage for a specific period of time e.g. 3s (3000ms) and after that time passes, append an object to an array with the text content. I have an on input event that gets an element by id and the textContent and stores it in a variable. All good. After 3s, I then take that text content, store it in an object and append it to an array.

    Weirdly, after 3s, it adds an object per character press. For example, if I type "The", it will append 3 objects to the array after the tick. Is that expected?

    If so, how would I only add the one object after 3s. The goal is that I'm debouncing continuous typing, however when there is a pause, I want to update my array (change buffer/history stack) so that I can capture all of the continuous typing up until the pause.

    I can't use other events like on blur, focus out, etc., to update the array because I want to remain focused on the current element and continue typing after my pause.
  • Armand

    2 months ago

    Do you also see that it creates an object for each character press? If so, you could create a formula that merges all those objects into one.
  • Tom Ireland

    2 months ago

    No, if I type "The" within 3s, after 3 seconds I'll get 3 objects all with "The" as the content. I think it's because on input (like key down, etc.), an event is fired, so all it's doing is delaying an update for each key event. If I removed the sleep and just did the update, then I'd get the same result (for each key press) instantly. Instead of 3 objects containing "The", I'd get [{"T"},{"Th"},{"The"}], which is expected. I need a way to clear the timeout as I'm typing I think and then only trigger it if there is a 3s pause. There is no clearTimeout workflow option, so I need to think creatively/logically to get it to work I think. πŸ€” 🀯
  • Armand

    2 months ago

    Is it not possible then to only take the last item in the array? Or am I thinking too simplistically now?

    Alternatively, maybe you could have a boolean variable that determines if there is a 3sec pause in typing.
  • Tom Ireland

    2 months ago

    The last item in the array is a good shout (hadn't thought of that but makes sense), although you're adding extra logic to handle the effect of the timeout. Ideally, a way to clear the timeout would be a better way to handle it. I was thinking of a boolean to fashion some kind of clearTimeout-style operation - just got to work it out. πŸ˜„
  • Max

    2 months ago

    Hi Tom! I would create a custom action for debounce. The problem in your setup is that you don't cancel the previous sleeps. So all actions will fire. A debounce typically cancels the previous timeout (sleep) so that it does not fire. I believe that with toddle native Workflows you cannot cancel the sleep
  • Tom Ireland

    2 months ago

    Thanks, Max. I was hoping to fashion some way in toddle but - as you say - it's not possible to cancel previous sleeps, so it would be a bit hacky to try and work around it. I was thinking of using a boolean e.g. set Timeout variable to be false or something on input and then sleep for x time and only trigger update if Timeout was true but figuring out the logic is tricky and it's probably simpler to create a custom action (and submit an improvement suggestion for Clear sleep or something like that).
  • Appreciate the input from you both. πŸ™
    πŸ’ͺ1
    πŸ‘1

Stop scrolling. Start building.

toddle is a visual web app builder that rivals custom code β€” but accessible to your entire team!

Try toddle β€” it's free!

Β© Copyright 2024 toddle. All rights reserved.