Estoy tratando de cambiar/animar mediante programación un control deslizante JQuery. En este ejemplo, hay dos matrices: una para el valor que se cambiará y otra para la duración entre cambios. Si observa la consola, verá que los valores cambian junto con la duración correspondiente. Sin embargo, el control deslizante no se mueve hasta que alcanza el valor final. También estoy tratando de actualizar el elemento de intervalo sliderValue . Nuevamente, solo cambia con el último valor. Consulte el ejemplo de JSFiddle (registro de la consola) para ver una demostración. El control deslizante debe comenzar en 100 y subir hasta 105 utilizando la matriz de duración.
let valueArray = [101, 102, 103, 104, 105] let durationArray = [800, 600, 550, 700, 300] $("#sliderValue").html(100) $("#slider").slider({ value: 100, min: 0, max: 200, step: 1, slide: function(event, ui) { $("#sliderValue").html(ui.value); } }); function pausecomp(millis, value) { var date = new Date(); var curDate = null; do { curDate = new Date(); } while (curDate - date < millis); console.log(value) $('#sliderValue').html(value) $("#slider").slider("option", "value", value); } function startSlider() { $("#sliderValue").html(100); $("#slider").slider("option", "value", 100); for (var i = 0; i < valueArray.length; i++) { pausecomp(durationArray[i], valueArray[i]); } }HTML:
<h1>Setting Slider Programmatically</h1> <div id="slider"></div> <p>Slider Value<span id="sliderValue"></span></p> <input type="button" value="Start Slider Animation" onclick="startSlider()">El ciclo do..while se ejecuta constantemente mientras 'espera', utilizando la CPU (un núcleo) al cien por cien. Aparentemente, jQuery usa lógica asíncrona internamente, pero el bucle while no permite que el bucle de eventos JS lo active, solo después de que haya terminado.
Entonces, también debe usar lógica asíncrona. Por ejemplo, con el clásico setTimeout al más moderno async/await usando una pequeña función auxiliar de 'dormir'.
let valueArray = [101, 102, 103, 104, 105] let durationArray = [800, 600, 550, 700, 300] $("#sliderValue").html(100) $("#slider").slider({ value: 100, min: 0, max: 200, step: 1, slide: function(event, ui) { $("#sliderValue").html(ui.value); } }); waitUntil = 0; function pausecomp(millis, value) { setTimeout(function() { console.log(value) $('#sliderValue').html(value) $("#slider").slider("option", "value", value); }, waitUntil += millis) } function startSlider() { console.clear() $("#sliderValue").html(100); $("#slider").slider("option", "value", 100); waitUntil = 0; for (var i = 0; i < valueArray.length; i++) { pausecomp(durationArray[i], valueArray[i]); } } function sleep(millis) { console.log('Sleep ' + millis) return new Promise(resolve => setTimeout(resolve, millis)); } async function pausecompAsync(millis, value) { await sleep(millis); console.log(value) $('#sliderValue').html(value) $("#slider").slider("option", "value", value); } async function startSliderAsync() { console.clear() $("#sliderValue").html(100); $("#slider").slider("option", "value", 100); for (var i = 0; i < valueArray.length; i++) { await pausecompAsync(durationArray[i], valueArray[i]); } console.clear() } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script src="https://code.jquery.com/ui/1.13.1/jquery-ui.min.js"></script> <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css" /> <div id="slider"></div> <p>Slider Value<span id="sliderValue"></span></p> <input type="button" value="Start Slider Animation" onclick="startSlider()"> <input type="button" value="Start Slider Animation using async/await/Promise" onclick="startSliderAsync()">