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

toString seems to cause setTimeout to not always execute function for variable argument of toString

本文关键字：toString 变量 参数 函数 执行 setTimeout      更新时间：2023-12-25

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

下面的实现不使用.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);
}

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

如"am not i am"所述，您将在所有循环完成后设置背景。以下是我喜欢的将参数传递到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);
}

我不知道这是否正是你想要的，但你应该能够根据需要进行调整。

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的优化，以及"我不是"对问题的解释。

我认为这段代码应该可以解决您的问题。

我在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);
}
相关文章：