To prevent overlapping animations or alerts, you can use the built-in queuing system.
- Define Duration: In your widget's JSON configuration, set the
widgetDuration property. This defines the maximum time (in seconds) the event queue will hold execution. The default is 0. - Manual Control: You can manually trigger the next item in the queue using
SE_API.resumeQueue(). This is useful when an animation has a dynamic duration and you want to resume the queue only after the animation finishes.
Example Scenario: Preventing overlapping community sub gift animations by calculating a random duration and calling resumeQueue via setTimeout.
```json
// Fields configuration
{
"widgetDuration": {
"type": "hidden",
"value": 15
}
}
// JavaScript implementation
let skippable = ["bot:counter", "event", "event:test", "event:skip", "alertService:toggleSound", "message", "delete-message", "delete-messages", "kvstore:update"];
let playAnimation = (event) => {
$("container").html(`<div id="sender">${event.sender}</div><div class="amount">${event.amount} subs!</div>`);
return Math.floor(Math.random() * 8) + 7; // Returns duration between 7-15s
};
window.addEventListener('onEventReceived', function (obj) {
const listener = obj.detail.listener;
const data = obj.detail.event;
// If the event is in the skippable list, process it immediately
if (skippable.indexOf(listener) !== -1) return;
// If it's not a sub event, resume queue immediately
if (listener !== 'subscriber-latest') {
SE_API.resumeQueue();
return;
}
// If it's not a sub gift, resume queue immediately
if (data.bulkGifted !== true && !data.gifted) {
SE_API.resumeQueue();
return;
}"},
