JS Set Interval For An Event Until Element Show | Code For Developers

JS set interval for an event until element show

Sometimes we need to active an event when a specific element loads on-page or part of an element change.

Sometimes we need to active an event when a specific element loads on-page or part of an element change. We will use the setInterval method to achieve this goal.

$(() => {
    const checkDiv = setInterval(() => {
        
      
    }, 300); 
})

Here, with this function, we will check every 300ms. and it will work forever. that is not good for just. so we will use another function call “clearInterval()” to stop it.

But when we exactly stop!

yes after we got our element in the desire position. so let’s have a condition and our code will be like this.

$(() => {
    const checkDiv = setInterval(() => {
        
        if ( you_condition ) {
            
           //your funtion
        
            clearInterval(checkDiv);
        }
    }, 300); 
})

Quick tip

On condition, we often need to check element visibility or height or length, etc. There is some ways to do

For visibility hide or show
$('.ex_modal').is(':visible')
To check height, if more than 10px
$('.ex_modal').height() >10
To check length
$('.ex_modal').length() >0

Let me know if any Query, hope it helps!

Previous Code

Animated jQuery Counter Up with the Intersection Observer API

Learn how to create a simple counter animation usi ...

Next Code

Update WooCommerce Delivery cost with condition

Change Delivery price base on what item in cart ...

Leave a Reply

Your email address will not be published. Required fields are marked *

If you find it useful

Buy me a coffee

ACF

Elementor

JavaScript

jQuery

Others

PHP

WooCommerce

WordPress

JS fetch post API Data in 5 min simple way

js fetch post API is very simple way. some line of ...

HTML img tag to HTML SVG tag [WordPress]

Image to SVG for WordPress. Generate svg code from ...

top