How to manage many setInterval function by jquery each individually

Question

hey i have a setInterval function [see below] inside a an each function for all divs with class, my problem is to manage each divs differently

please help

var div_holder = $('div.products_each');
     div_holder.each(function(i){
var vari= setInterval(function() {
                  //do something here
          },1000/60)
});

and i could close this by

$(document).on("mouseenter", ".products_each_all",function(){
     $(this).children('div._title').css('margin-left',"0px");
        clearInterval(vari);
})

this Clear all setInterval call [effects all div action]

My question is how to manage each classes setinterval differently

thanks in advance

Answer 1

use .data() to store the interval reference of each element individually.

var div_holder = $('div.products_each');
div_holder.each(function (i) {
    var vari = setInterval(function () {
        //do something here
    }, 1000 / 60)
    $(this).data('vari', vari)
});

$(document).on("mouseenter", ".products_each_all", function () {
    $(this).children('div._title').css('margin-left', "0px");

    //each products_each element will have a data item called vari which holds the interval reference, you can use it to clear it later
    var div_holder = $('div.products_each');
    div_holder.each(function (i) {
        clearInterval($(this).data('vari'));
    });
})

Answer 2

you can achieve it like this:

$.each($(".products_each"), function (index, value) {
    var vari = setInterval(function() {
          // do what ever you want with value
          // it is your div : $(value).hide();
    }, 1000/60);
});