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/

多线程JavaScript：图像滑块

1 个答案: