如何編寫使jQuery UI滑塊自動滑動的腳本？

Question

所以我在我的網頁一些jQuery UI sliders與掛接到它們的代碼

var sliders = $("#sliders .slider"); 
var availableTotal = 100; 


sliders.each(function() { 
    var init_value = parseInt($(this).text()); 
    $(this).siblings('.value').text(init_value); 
    $(this).empty().slider({  
     value: init_value, 
     min: 0, 
     max: availableTotal, 
     range: "max", 
     step: 5, 
     animate: 0, 
     slide: function (event, ui) { 
      // ... 
     } 

    }); 
}); 

。我試圖寫一個測試腳本，使它們自動滑動左邊或右邊，像

for (var k = 0; ; ++k) 
{ 
    setTimeout(50,function(){ 
     $(sliders[k % sliders.length]).slide(...); 
    }); 
} 

，但我不知道在什麼(...)去。 event和ui究竟是什麼，我如何傳遞隨機生成的有效值用於我的自動化測試？

Answer 1

如果要以編程方式測試滑塊，則需要設置一個循環並調整它們的值。我以下面的小提琴爲例：https://jsfiddle.net/Twisty/azybrcn6/

有些事情對我的計時器功能來說很奇怪......還在工作，但這個想法很有道理。

JQuery的

var timer; 
var inc = "pos"; 

function slideInc(obj, n) { 
    // Increment SLider Object by n 
    var v = obj.slider("option", "value"); 
    obj.slider("option", "value", v + n); 
    console.log("Slider was ", v, " set to ", obj.slider("option", "value")); 
} 

function slideDec(obj, n) { 
    // Decrement Slider Object by n 
    var v = obj.slider("option", "value"); 
    obj.slider("option", "value", v - n); 
    console.log("Slider was ", v, " set to ", obj.slider("option", "value")); 
} 

$(function() { 
    var k = 0; 
    $("#slider").slider({ 
    min: 0, 
    max: 100, 
    range: "max", 
    step: 5, 
    animate: 0, 
    value: 0, 
    slide: function(e, ui) { 
     $("#value").html(ui.value); 
    } 
    }); 
    $("#test, #end").button(); 
    $("#test").click(function() { 
    console.log("Starting."); 
    var $t = $("#slider"); 
    var min = $t.slider("option", "min"); 
    var max = $t.slider("option", "max"); 
    var st = $t.slider("option", "step"); 

    timer = setInterval(function() { 
     console.log("Inc is ", inc); 
     if (inc == "pos") { 
     slideInc($t, st); 
     if ($t.slider("option", "value") == max) { 
      inc = "neg"; 
     } 
     } else { 
     slideDec($t, st); 
     if ($t.slider("option", "value") == min) { 
      inc = "pos"; 
     } 
     } 
     $("#value").html($t.slider("option", "value")); 
     console.log("Next."); 
    }, 1000); 
    }); 
    $("#end").click(function() { 
    console.log("Ending, value: " + $("#slider").slider("option", "value")); 
    clearInterval(timer); 
    }); 
}); 

當我們開始計時，我會step直到它到達max，然後切換到遞減遞增k。每次定時器執行該功能時，它都會檢查是否增加或減少k，調整滑塊並重新開始。

我還不能稱之爲一個工作示例。它正在發射一次，然後不重複。將繼續工作並更新一次，如你所描述的那樣工作。