带速度控制的图像动画

Question

我们的带速度控制的图像动画有一些问题。

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

我们这里有一个 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.Use 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.Or，相反，将你的间隔设置为一个全局变量（不酷），当用户想要改变动画速度时只改变它的值。

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

带速度控制的图像动画

Image animation with speed control

javascript

jquery

performance

animation

controls