Estoy creando diferentes cuentas regresivas que inicien al momento de interactuar con un click en el contenido “Eliminar”.
$(document).on('click', '.box > ul > li:nth-child(2)', function (event) {
event.stopPropagation();
var save_box = $(this).parent().parent().html()
var aquiobj = $(this).parent().parent()
setTimeout(function () {
timer(aquiobj)
}, 100);
$(this).parent().parent().html('<div class="element"><p>Eliminando en...</p><span class="timeout">5</span><p>Cancelar</p>');
});
function timer(selector) {
var self = $(selector);
var sec = parseInt(self.find('span.timeout').text());
var interval = setInterval(function () {
sec--;
if (sec >= 0) {
self.find('span.timeout').text(sec);
} else {
clearInterval(interval);
self.remove();
}
}, 1000);
}
.conten {
text-align: center;
font-family: 'Roboto';
}
.svg {
display: flex;
flex-wrap: wrap;
align-content: flex-start;
justify-content: center;
}
.box {
box-shadow:
0 2.8px 2.2px rgba(0, 0, 0, 0.034),
0 6.7px 5.3px rgba(0, 0, 0, 0.048),
0 12.5px 10px rgba(0, 0, 0, 0.06),
0 22.3px 17.9px rgba(0, 0, 0, 0.072),
0 41.8px 33.4px rgba(0, 0, 0, 0.086),
0px -20px 80px rgba(0, 0, 0, 0.12);
;
border: 2px solid gray;
min-height: 200px;
width: 450px;
background: white;
border-radius: 5px;
margin: 100px 5px 0 5px;
cursor: pointer;
transition: background-color .5s;
}
.box > a {
margin: -10px 0 40px;
display: inline-block;
text-decoration: none;
background-image: linear-gradient(currentColor, currentColor);
background-position: 50% 100%;
background-repeat: no-repeat;
background-size: 0% 2px;
transition: background-size .5s;
}
.box > a:hover, .box > a:focus, .box:hover a {
background-size: 100% 2px;
}
.box:hover {
background-color: rgba(238, 232, 170, 0.247);
}
.box > ul {
list-style-type: none;
padding: 0;
width: 151px;
background-color: #f1f1f1;
margin: 30px 150px;
position: absolute;
border-radius:5%;
opacity: 0;
transition: opacity .5s;
box-shadow: 0px -1px 20px -10px rgba(0,0,0,0.75);
}
.box:hover > ul {
opacity: 1;
}
.box > ul > li > a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
.box > ul > li > a:hover {
background-color: #383f3f50;
color: white;
}
<div class="conten">
<div class="svg">
<div class="box">
<ul><li><a href="#home">Cambiar nombre</a></li><li><a href="#news">Eliminar</a></li></ul>
<a>Nuestra Sr. del Rosario</a><br>
</div>
<div class="box">
<ul><li><a href="#home">Cambiar nombre</a></li><li><a href="#news">Eliminar</a></li></ul>
<a>Santa Catalina</a><br>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
Hasta el momento todo funciona bien, el inconveniente surge cuando deseo cancelar una de las cuentas regresiva, haciendo click en el contenido “Cancelar”
$(document).on('click', '.box > ul > li:nth-child(2)', function (event) {
event.stopPropagation();
var save_box = $(this).parent().parent().html()
var aquiobj = $(this).parent().parent()
setTimeout(function () {
timer(aquiobj)
}, 100);
$(this).parent().parent().html('<div class="element"><p>Eliminando en...</p><span class="timeout">5</span><p>Cancelar</p>');
$("body").on('click', '.element > p:last-child', function () {
$(this).parent().html(save_box)
})
});
function timer(selector) {
var self = $(selector);
var sec = parseInt(self.find('span.timeout').text());
var interval = setInterval(function () {
sec--;
if (sec >= 0) {
self.find('span.timeout').text(sec);
} else {
clearInterval(interval);
self.remove();
}
}, 1000);
}
.conten {
text-align: center;
font-family: 'Roboto';
}
.svg {
display: flex;
flex-wrap: wrap;
align-content: flex-start;
justify-content: center;
}
.box {
box-shadow:
0 2.8px 2.2px rgba(0, 0, 0, 0.034),
0 6.7px 5.3px rgba(0, 0, 0, 0.048),
0 12.5px 10px rgba(0, 0, 0, 0.06),
0 22.3px 17.9px rgba(0, 0, 0, 0.072),
0 41.8px 33.4px rgba(0, 0, 0, 0.086),
0px -20px 80px rgba(0, 0, 0, 0.12);
;
border: 2px solid gray;
min-height: 200px;
width: 450px;
background: white;
border-radius: 5px;
margin: 100px 5px 0 5px;
cursor: pointer;
transition: background-color .5s;
}
.box > a {
margin: -10px 0 40px;
display: inline-block;
text-decoration: none;
background-image: linear-gradient(currentColor, currentColor);
background-position: 50% 100%;
background-repeat: no-repeat;
background-size: 0% 2px;
transition: background-size .5s;
}
.box > a:hover, .box > a:focus, .box:hover a {
background-size: 100% 2px;
}
.box:hover {
background-color: rgba(238, 232, 170, 0.247);
}
.box > ul {
list-style-type: none;
padding: 0;
width: 151px;
background-color: #f1f1f1;
margin: 30px 150px;
position: absolute;
border-radius:5%;
opacity: 0;
transition: opacity .5s;
box-shadow: 0px -1px 20px -10px rgba(0,0,0,0.75);
}
.box:hover > ul {
opacity: 1;
}
.box > ul > li > a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
.box > ul > li > a:hover {
background-color: #383f3f50;
color: white;
}
<div class="conten">
<div class="svg">
<div class="box">
<ul><li><a href="#home">Cambiar nombre</a></li><li><a href="#news">Eliminar</a></li></ul>
<a>Nuestra Sr. del Rosario</a><br>
</div>
<div class="box">
<ul><li><a href="#home">Cambiar nombre</a></li><li><a href="#news">Eliminar</a></li></ul>
<a>Santa Catalina</a><br>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
En un principio parecer funcionar, pero el contador sigue transcurriendo y al cambo de unos segundos la card se elimina, lo cual no debería de suceder.
Mi pregunta es, ¿como puedo solucionar esto?; Acaso es posible cancelar un `setInterval` especifico con `clearInterval()` sin necesidad de afectar las demás cunetas regresivas que estén en marcha.