curseur JQuery pour changer d'intervalle sur le script de rafraîchissement

Question

J'utilise ce morceau de code pour me rafraîchir div toutes les X secondes:

 <script> 
$(document).ready(function() { 
    $("#container").load("stats.php"); 
    var refreshId = setInterval(function() { 
     $("#container").load('stats.php'); 
    }, 10*1000); 
    $.ajaxSetup({ cache: false }); 
}); 
</script> 

Cela fonctionne très bien, seule chose que je veux ajouter est un curseur comme celui-ci : http://jqueryui.com/demos/slider/#steps

Je veux qu'il soit en mesure de définir l'intervalle de la minuterie de rafraîchissement qui est par défaut de 10 secondes (10 * 1000)

est-il possible de laisser le curseur modifier la valeur? Si oui, comment puis-je faire cela?

merci!

Answer 1

Votre script sera quelque chose comme ceci:

$(document).ready(function() { 
    var intSeconds = 10; 
    var refreshId; 


    function sTimeout() 
    { 
      // Load content 
      $("#container").load("stats.php"); 

      // Saving the timeout 
      refreshId = setTimeout(function() { 
      sTimout(); 
     }, intSeconds *1000); 
    } 
    sTimeout(); 
    $.ajaxSetup({ cache: false }); 

    // The slider 
    $(".ui-slider").slider({ 
     min : 1, // minimum value 
     max : 20, // Maximum value 
     value : intSeconds, // Copy current value 
     change: function(event, ui) { 
      clearTimeout(refreshId); // clear it 
      intSeconds = ui.value; // Update value 
      sTimeout(); // Restart it 
     } 
    }); 
}); 

Maintenant, ajoutez juste un curseur DIV à votre source, et vérifiez-le.

Answer 2

Ajouter quelque chose comme slider ceci:

var interval = 10000; 
$("#slider").slider({ 
    value:10, 
    min: 1, 
    max: 20, 
    step: 1, 
    slide: function(event, ui) { 
    interval = ui.value * 1000; 
    } 
}); 

Ensuite, au lieu d'utiliser un setInterval, vous pouvez utiliser setTimeout:

(function reload() { 
     $("#container").load('stats.php'); 
     setTimeout(reload(), interval); 
    })();