多線程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/