多线程JavaScript：图像滑块

Question

我想为我的网页制作一个简单的滑块。 以下是加载图像的功能。

但是，它没有按预期运行。 这是一个无限循环，会冻结网页。 我不确定如何解决此问题，但我认为它必须在另一个线程上运行。

最好的解决方案是什么？ 谢谢。

function loadProd_logos() {
    var prod_logos = ["prod_01.png", "prod_02.png"];
    var prod_cnt = prod_logos.length;
    var prod_last = prod_cnt - 1;
    for(var i = 0; i < prod_cnt; i++) {
        prod_logos[i] = '<img class="prod_logo" src="prod_thumb/' + prod_logos[i] + '">';
    }

    var x = 0;
    while (1 == 1) {
        var html = prod_logos[x];
        $(".prod_logo").slideUp("slow");
        wait(1000);
        $(".product_thumb").empty();
        $(".product_thumb").append(html);
        $(".prod_logo").slideDown("slow");
        wait(5000);
        x++;
        if(x == prod_last) {
            x = 0;
        }
    }

}

function wait(x) {
    setTimeout(function () {
    }, x);
}

Answer 1

我看到的一个直接问题是，假定wait是阻止功能。 setTimeout通过在x毫秒后触发提供的回调来工作。 如果要在一定间隔内重复执行任务，请使用setInterval并在您提供的回调中执行操作。

https://jsfiddle.net/kd4x3uw5/