javascript - 带速度控制的图像动画

Question

我们的图像动画在速度控制方面存在一些问题。

它利用超时来更改图像，但我们想用 slider 更改超时值，但由于某种原因，它不起作用。有人可以帮助我们吗？

我们这里有一个 Jfiddle:http://jsfiddle.net/Kbroeren/fmd4xbew/

谢谢!凯文

var jArray = ["http://www.parijsalacarte.nl/images/mickey-mouse.jpg", "http://www.startpagina.nl/athene/dochters/cliparts-disney/images/donad%20duck-106.jpg", "http://images2.proud2bme.nl/hsfile_203909.jpg"];

var image_count = 0;

function rollover(image_id, millisecs) {
var image = document.getElementById(image_id);
image.src = jArray[image_count];
image_count++;

if (image_count >= jArray.length) {
    image_count = 0;
}
var timeout = setTimeout("rollover('" + image_id + "'," + millisecs + ");", millisecs);
}

rollover("img1", 200);


$(function () {
var value;
var $document = $(document),
    $inputRange = $('input[type="range"]');

// Example functionality to demonstrate a value feedback
function valueOutput(element) {
    var value = element.value,
        output = element.parentNode.getElementsByTagName('output')[0];
    output.innerHTML = value;
}
for (var i = $inputRange.length - 1; i >= 0; i--) {
    valueOutput($inputRange[i]);
};
$document.on('change', 'input[type="range"]', function (e) {
    valueOutput(e.target);
    rollover("img1", 200);
});
// end

$inputRange.rangeslider({
    polyfill: false
});
});

Answer 1

您不断创建越来越多的无限函数调用而不停止它们。

第一次调用函数后，它会不断调用自身。 然后你以不同的时间间隔(毫秒)再次调用它，它也会开始调用自己......

您可以尝试两种不同的方法。 1.使用setInterval代替setTimeout。在使用新值设置间隔之前，请使用clearInterval 清除间隔。

/// Call animation() every 200 ms
var timer = setInterval("Animation()",200);


function ChageSpeed(miliseces){

    ///Stop calling Animation()
    clearInterval(timer);

    /// Start calling Animation() every "miliseces" ms
    timer =  setInterval("Animation()",miliseces);
}

function Animation(){
    /// Animation code goes here
}

2.或者，将间隔设置为全局变量(不酷)，然后在用户想要更改动画速度时更改它的值。

var millisecs = 200;

function rollover(image_id) {
    var image = document.getElementById(image_id);
    image.src = jArray[image_count];
    image_count++;

    if (image_count >= jArray.length) {
        image_count = 0;
    }

    var timeout = setTimeout("rollover('" + image_id + "'," + millisecs + ");", millisecs);
}


$document.on('change', 'input[type="range"]', function (e) {
    valueOutput(e.target);
    millisecs = YourNewValue;
});