Clear Settimeouts aplicados por clase. Funcionamiento que crea Tiempo de espera -- javascript campo con jquery campo con html campo con dom camp Relacionados El problema

Clear setTimeouts applied by class.each operation that creates timeout


0
vote

problema

Español

Siento que el título podría no tener mucho sentido. No estoy seguro de cómo decir lo que estoy haciendo.

Tengo una clase que agrego a los elementos que usan atributos de datos HTML5 para configurar un temporizador de actualización. Aquí está el código actual.

  $(document).ready(function () {     $('.refresh').each(function() {         var element = $(this);         var url = element.data('url');         var interval = element.data('interval');         var preloader = element.data('show-loading');         var globalPreloader = true;          if (typeof preloader === 'undefined' || preloader === null) {         }         else if (preloader != 'global' && preloader != 'true') {             globalPreloader = false;         }          (function(element, url, interval) {             window.setInterval(function () {                  if (!globalPreloader)                 {                     $('#' + preloader).show();                 }                  $.ajax({                     url: url,                     type: "GET",                     global: globalPreloader,                     success: function (data) {                         element.html(data);                          if (!globalPreloader) {                             $('#' + preloaderID).hide();                         }                     }                 });              }, interval);         })(element, url, interval);     });     $.ajaxSetup({ cache: false }); });   

Ahora tengo elementos que un usuario puede hacer clic en la 'ventana' que lo elimina. Estos elementos pueden estar cansados ​​con un temporizador que fue establecido por el código anterior.

Código utilizado para eliminar el elemento

  $(".btn-close").on('click', function () {     var id = $(this).closest("div.window").attr("id");      if (typeof id === 'undefined' || id === null) {     } else {         $('#' + id).remove();     } });   

Necesito matar ahora a los temporizadores creados para los elementos eliminados.

¿Cuál es la mejor manera de hacer esto?

Original en ingles

I'm sorry the title might not make much sense. I'm not sure how to word what i'm doing.

I have a class that I add to elements that uses HTML5 data attributes to setup a refresh timer. Here is the current code.

$(document).ready(function () {     $('.refresh').each(function() {         var element = $(this);         var url = element.data('url');         var interval = element.data('interval');         var preloader = element.data('show-loading');         var globalPreloader = true;          if (typeof preloader === 'undefined' || preloader === null) {         }         else if (preloader != 'global' && preloader != 'true') {             globalPreloader = false;         }          (function(element, url, interval) {             window.setInterval(function () {                  if (!globalPreloader)                 {                     $('#' + preloader).show();                 }                  $.ajax({                     url: url,                     type: "GET",                     global: globalPreloader,                     success: function (data) {                         element.html(data);                          if (!globalPreloader) {                             $('#' + preloaderID).hide();                         }                     }                 });              }, interval);         })(element, url, interval);     });     $.ajaxSetup({ cache: false }); }); 

Now I have elements that a user can click on the 'window' which removes it. These elements can be tired to a timer that was set by the above code.

Code used to remove the element

$(".btn-close").on('click', function () {     var id = $(this).closest("div.window").attr("id");      if (typeof id === 'undefined' || id === null) {     } else {         $('#' + id).remove();     } }); 

I need to now kill the timers created for the elements removed.

What is the best way to do this?

           

Lista de respuestas

1
 
vote
vote
La mejor respuesta
 

No claro sobre cómo los aclaras, así que los hago todo aquí al final.

  d111  

Ejemplo: Retire el temporizador en un clic

  d2  
 

Not clear on how you clear them so I do them all here at the end.

$(document).ready(function () {     $('.refresh').each(function () {         var element = $(this);         var url = element.data('url');         var interval = element.data('interval');         var showLoading = element.data('show-loading');         var preloaderID = element.data('preloader-id');          if (typeof showLoading === 'undefined' || showLoading === null) {             showLoading = true;         }          (function (element, url, interval) {              var timerid = window.setInterval(function () {                  if (showLoading) {                     $('#' + preloaderID).show();                 }                  $.ajax({                     url: url,                     type: "GET",                     global: showLoading,                     success: function (data) {                         element.html(data);                          if (showLoading) {                             $('#' + preloaderID).hide();                         }                     }                 });              }, interval);             element.data("timerid",timerid );//add the timerid         })(element, url, interval);     });     $.ajaxSetup({         cache: false     });     $('.refresh').each(function () {        var timerId = $(this).data("timerid");        window.clearInterval(timerId);     }); }); 

Example: remove timer on a click

$('.refresh').on('click', function () {     var timerId = $(this).data("timerid");     window.clearInterval(timerId); }); 
 
 
1
 
vote

d3 Devuelve un asa para el tiempo de espera. Puede usar eso para detener el tiempo de espera:

  d4  

espero que ayude.

 

window.setIntervalreturns a handle for the timeout. You can use that to stop the timeout:

var handle = window.setInterval(function() {     window.clearInterval(handle); }, 1000); 

Hope that helps.

 
 
     
     
0
 
vote

Aquí hay una pequeña demostración de intervalos e "Asesinos a intervalos". Es un ejemplo mínimo que muestra cómo puede borrar intervalos de forma javascript-y.

  d5  
  d6  

Simplemente ejecute el fragmento para ver una demostración. Siéntase libre de comentar si tiene alguna pregunta. Puede configurar múltiples intervalos presionando Start repetidamente y que sean borrados a la vez con un solo clic en STOP.

 

Here's a little demo of intervals and "interval assassins". It's a minimal example showing how you can clear intervals in a JavaScript-y way.

$('.start').click(function() {      var $parentRow = $(this).closest('tr')      var $stop = $parentRow.find('.stop')      var $val = $parentRow.children('.val')            // interval      var iid = setInterval(function() {          $val.text(+$val.text() + 1)      }, 10)      console.log(`New Target: ${iid}`)            // interval assassin      $stop.click(function() {          clearInterval(iid)          console.log(`Interval[${iid}] has been assassinated.`)          $(this).off('click')      })  })
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <table>      <tr>          <td><button class="start">Start</button></td>          <td><button class="stop">Stop</button></td>          <td class="val">0</td>      </tr>      <tr>          <td><button class="start">Start</button></td>          <td><button class="stop">Stop</button></td>          <td class="val">0</td>  </table>

Just run the snippet to see a demo. Feel free to comment if you have any questions. You can set up multiple intervals by pressing start repeatedly and have them all be cleared at once with a single click of stop.

 
 

Relacionados problema

1279  ¿Cómo pongo / no tomar una cookie con jQuery?  ( How do i set unset a cookie with jquery ) 
¿Cómo configuro y no prestar atención a una cookie utilizando jQuery, por ejemplo, cree una cookie llamada test y configure el valor en 1 ? ...

5  ¿Por qué Internet Explorer abre la presentación de forma en una nueva ventana y no en un iframe insertado dinámicamente?  ( Why does internet explorer open form submission in a new window and not in a dyn ) 
Estoy tratando de publicar un formulario a un iframe oculto, insertado dinámicamente, pero en Internet Explorer, el envío del formulario se abre en una nueva ...

0  Realización de jquery show / ocultar en contenido creado dinámicamente  ( Performing jquery show hide on dynamically created content ) 
Tengo una página que creé con jQuery, y en esta página es una tabla donde las filas de la tabla tienen nombres de clase que los identifican como un cierto col...

0  Valor que pasa a las funciones de Listener  ( Passing value to eventlistener functions ) 
for ( var i=0; i<thumbs.length; i++) { var num = i; Core.addEventListener(thumbs[i], "click", Slide.thumbClick); } En el código anterior, quiero...

3  ¿Hay alguna manera de detectar un cambio de nodo dom en JavaScript?  ( Is there a way to detect a dom node change in javascript ) 
Estoy buscando una forma de detectar si algo cambia dentro de un nodo DOM dado. ¿Hay algún evento u otra técnica que haga esto? ¡Gracias! ...

4  ¿Cómo copia un elemento de estilo en línea en IE?  ( How do you copy an inline style element in ie ) 
IE no permite escribir la propiedad INTERHTML de los elementos de estilo o cabeza. Entonces, ¿cómo copia un elemento de estilo de la cabeza de un documento a ...

0  Solo carga HTML en un iframe  ( Only load html into an iframe ) 
¿Cómo puedo cargar solo el HTML de una página en un iframe, sin activar automáticamente la descarga de todos los CSS, scripts, imágenes, videos en la página? ...

18  ¿Cómo cambiar el tamaño de un contenedor DIV a la altura total de sus hijos?  ( How to resize a container div to the total height of its children ) 
Tengo un elemento de contenedor que necesito cambiar de tamaño a medida que cambie su contenido. Contiene 2 divs absolutamente posicionados que pueden cambiar...

0  Reemplace todas las imágenes con elemento DIV de fondo  ( Replace all images with div background element ) 
var all = document.getElementsByTagName( 'img' ); for( i = 0; i < all.length; i++ ){ var newimg; (newimg=document.createElement('div')).style.cssText...

1371  ¿Cómo puedo averiguar qué elemento DOM tiene el enfoque?  ( How do i find out which dom element has the focus ) 
Me gustaría averiguarlo, en Javascript, qué elemento actualmente se ha centrado. He estado mirando a través de la DOM y no he encontrado lo que necesito, toda...




© 2022 respuesta.top Reservados todos los derechos. Centro de preguntas y respuestas reservados todos los derechos