Clear Timeout on Each Flickity Change in JavaScript

$carousel.on( 'change.flickity', function( event, index ) { \nvar h3 = $('.sj_blog_carosuel .sj_cat.is-selected h3').text(); \nvar p3 = $('.sj_blog_carosuel .sj_cat.is-selected p').text(); \n\n\n$('.blog_post_cnt').addClass('shimmer'); \n\n$('.blog_post_cnt h3').text(h3); \n$('.blog_post_cnt p').text(p3); \n\nclearTimeout(timeoutId); \n\nvar timeoutId = setTimeout(function() { \n$('.blog_post_cnt').removeClass('shimmer'); \n}, 1000); \n\n\n\n}); \n\n\ni want to clear timeout on each change. To clear the timeout on each change, you need to declare the timeoutId variable outside of the event listener function. Here's the modified code: \n\njavascript \nvar timeoutId; \n\n$carousel.on('change.flickity', function(event, index) { \n var h3 = $('.sj_blog_carosuel .sj_cat.is-selected h3').text(); \n var p3 = $('.sj_blog_carosuel .sj_cat.is-selected p').text(); \n\n $('.blog_post_cnt').addClass('shimmer'); \n $('.blog_post_cnt h3').text(h3); \n $('.blog_post_cnt p').text(p3); \n\n clearTimeout(timeoutId); \n\n timeoutId = setTimeout(function() { \n $('.blog_post_cnt').removeClass('shimmer'); \n }, 1000); \n}); \n \n\nNow, the timeoutId variable is declared outside the event listener, so it can be accessed and cleared on each change.