Question

此代码的目的是在循环中多次更改网页的背景。

以下实现不使用.toString（）来设置背景颜色，而是明确地和静态地说明背景应该更改为的颜色。

var i=1;
function changeColor() {
    var 
        interval=100, //16.66666666, //60 hertz refresh rate
        loops=10
    ;

    setTimeout(function() {$("#page").css({"background":"#000"})}, interval*0);
    setTimeout(function() {$("#page").css({"background":"#111"})}, interval*1);
    setTimeout(function() {$("#page").css({"background":"#222"})}, interval*2);
    setTimeout(function() {$("#page").css({"background":"#333"})}, interval*3);
    setTimeout(function() {$("#page").css({"background":"#444"})}, interval*4);
    setTimeout(function() {$("#page").css({"background":"#555"})}, interval*5);
    setTimeout(function() {$("#page").css({"background":"#666"})}, interval*6);
    setTimeout(function() {$("#page").css({"background":"#777"})}, interval*7);
    setTimeout(function() {$("#page").css({"background":"#888"})}, interval*8);
    setTimeout(function() {$("#page").css({"background":"#999"})}, interval*9);
    setTimeout(function() {$("#page").css({"background":"#AAA"})}, interval*10);
    setTimeout(function() {$("#page").css({"background":"#BBB"})}, interval*11);
    setTimeout(function() {$("#page").css({"background":"#CCC"})}, interval*12);
    setTimeout(function() {$("#page").css({"background":"#DDD"})}, interval*13);
    setTimeout(function() {$("#page").css({"background":"#EEE"})}, interval*14);
    setTimeout(function() {$("#page").css({"background":"#FFF"})}, interval*15);

    setTimeout(function() {
        if (i<loops) {
            i++;
            changeColor();
        } else {
            $("#page").css({"background":"#FFF"});
            i=1;
        }
    },interval*16);
}

我应该使用for循环似乎很明显，所以我把它重写为：

var i=1;
var color=0x111111;
function changeColor() {
    var 
        interval=100, //16.66666666, //60 hertz refresh rate
        loops=3
    ;
    for (j=0;j<15;j++) {
        setTimeout(function() {$("#page").css({"background":"#"+color.toString(16)})}, interval*j);
        color+=0x111111;
    }
    color=0x111111;
    setTimeout(function() {
        if (i<loops) {
            i++;
            changeColor();
        } else {
            $("#page").css({"background":"#FFF"});
            i=1;
        }
    },interval*j);
}

但是，背景颜色仅使用此代码更改一次。

Answer 1

正如“我不是我”所提到的那样，你在所有循环完成后设置背景。以下是我喜欢将参数传递给setTimeout或setInterval的方法：

new (function (color) {
    setTimeout(function(){
        document.body.style.background = newcolor;
    }, 50);
})(color);

基本上它会创建一个本地范围，直到setTimeout完成后才会销毁。

更一般地，您的代码可以简化为以下内容：

var i = 0;
var color = 0x000000;
function changeColor() {
    color += 0x111111;
    if (color > 0xffffff) {
        if (i >= 3) {
            return;
        }
        color = 0x000000;
        i++;
    }
    document.body.style.background = "#" + color.toString(16);
    setTimeout(changeColor, 100);
}

我不知道这是否完全符合您的要求，但您应该能够根据需要进行调整。

Answer 2

我认为此代码可以解决您的问题。

我在for循环中添加了一个额外的函数调用，它将颜色作为参数。这样，该函数的每次调用都有自己的颜色值，不会随着时间的推移而变化。

var i=1;
var color=0x111111;
var page=$("#page");
function changeColor() {
    var
        interval=100, //16.66666666, //60 hertz refresh rate
        loops=3
    ;
    for (j=0;j<15;j++) {
      // I added an inner function in the for loop that holds the value of var color
      (function (color) {
        setTimeout(function() {page.css({"background":"#"+color.toString(16)})}, interval*j);
      })(color);
      color += 0x111111;
    }
    setTimeout(function() {
        if (i<loops) {
            i++;
            changeColor();
        } else {
            page.css({"background":"#FFF"});
            i=1;
        }
    },interval*j);
}

Answer 3

var i=1;
var color=0;
function changeColor() {
    var 
        interval = 16.66666, //60 hertz refresh rate
        loops = 40,
        $page = $("#page")
    ;

    for (j=0;j<16;j++) {
        setTimeout(function() {
            $page.css({"background":"#"+color.toString(16)});
            color+=0x111111 //color increment <i>inside</i> the Timeout (d'oh)
        }, interval*j);
    }

    // Pretty wind-down :3
    for (;j<31;j++) {
        setTimeout(function() {
            $page.css({"background":"#"+color.toString(16)});
            color-=0x111111
        }, interval*j);
    }

    setTimeout(function() {
        color=0x111111;
        if (i<loops) {
            i++;
            changeColor();
        } else {
            $page.css({"background":"#FFF"});
            i=1;
        }
    },interval*j);
}

感谢您的帮助，特别是Rob W的优化，以及“我不是我”对该问题的解释。

toString似乎导致setTimeout不总是为toString的变量参数执行函数

3 个答案: