如何编写使jQuery UI滑块自动滑动的脚本？

Question

So I have some jQuery UI sliders on my webpage with the code

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) {
             // ... 
        } 

    });
});

hooked up to them. I'm trying to write a testing script that makes them automatically slide right or left, like

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

but I'm not sure what goes in the (...) . What exactly is event and ui and how can I pass in randomly generated valid values for my automated test?

Answer 1

If you want to test your sliders programmatically, you need to set a loop and adjust their values. I setup the following Fiddle as an example: https://jsfiddle.net/Twisty/azybrcn6/

Something is weird with my timer function... still working on it, but the idea is sound.

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);
  });
});

When we start the timer, I will increment k by step until it reaches the max and then toggle to decrement. Each time the timer executes the function, it will check to see if we increment or decrement k , adjust the slider, and start over.

I cannot yet call this a working example. It's firing once and then not repeating. Will keep working on it and update once I have it working as you described.