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.使用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;
});

带速度控制的图像动画

1 个答案: