使用 settimeout 以延迟方式对函数进行排队

Question

更新：我编辑了setTimeout()代码以在函数中运行代码，但现在什么都没有运行。我还更改了函数以接受drawcount、i和j，使调用appendcharacter(drawcount, i, j)。它仍然什么都不做（尽管最初它同时运行）。由于某种原因setTimeout超时后未正常运行该函数。

-

-原始问题--

我有以下代码（请注意，并非所有变量都列出，只是与本节代码相关或与该部分代码相关的变量）。我想错开appendcharacter(drawcount)的运行，以便它以半秒的间隔运行，但这段代码在完全相同的时间运行所有内容：

        var $span, $br;
        var $img = $('#image');
        $(document).ready(function () {
            var drawcount = 0;
            for (var j = 0; j < imgwidth; j++) {
                $("#image").append("<br>");
                for (var i = 0; i < imgheight; i++) {
                    var timeout = 500 * drawcount;
                    console.log(timeout);
                    setTimeout(function () {
                        appendcharacter(drawcount, i, j);
                    },timeout);
                    drawcount++;
                }
            }

            function appendcharacter(drawcount, i, j) {
                $span = $("<span id='" + i + "_" + j + "' style='position:relative; display: inline; color: rgba(" + pixels[j][i].red + " , " + pixels[j][i].green + " , " + pixels[j][i].blue + ", 1);'></span>").appendTo($img);
                switch (drawcount % 18) {
                    case 0:
                        $("#" + i + "_" + j).append("/");
                        break;
                    case 2:
                        $("#" + i + "_" + j).append("-");
                        break;
                    case 3:
                        $("#" + i + "_" + j).append("/");
                        break;
                    case 4:
                        $("#" + i + "_" + j).append("-");
                        break;
                    case 5:
                        $("#" + i + "_" + j).append("/");
                        break;
                    case 6:
                        $("#" + i + "_" + j).append("-");
                        break;
                    case 7:
                        $("#" + i + "_" + j).append("(");
                        break;
                    case 8:
                        $("#" + i + "_" + j).append("8");
                        break;
                    case 9:
                        $("#" + i + "_" + j).append("8");
                        break;
                    case 10:
                        $("#" + i + "_" + j).append(")");
                        break;
                    case 11:
                        $("#" + i + "_" + j).append("-");
                        break;
                    case 12:
                        $("#" + i + "_" + j).append("\");
                        break;
                    case 13:
                        $("#" + i + "_" + j).append("-");
                        break;
                    case 14:
                        $("#" + i + "_" + j).append("\");
                        break;
                    case 15:
                        $("#" + i + "_" + j).append("-");
                        break;
                    case 16:
                        $("#" + i + "_" + j).append("\");
                        break;
                    case 17:
                        $("#" + i + "_" + j).append("  ");
                        break;
                }
            }

        });

Answer 1

您正在调用函数appendcharacter并将其返回的值作为回调传递给 setTimeout 方法。

您需要将函数

引用传递给将被调用的setTimeout，您还需要使用局部闭包函数，因为在回调中引用了共享变量drawcount

        (function(drawcount, i, j){
            setTimeout(function () {
                appendcharacter(drawcount, i, j);
            }, timeout);
        })(drawcount, i, j)

您还需要将 i 和 j 作为 apram 传递给appendcharacter

前任

function appendcharacter(drawcount, i, j) {
    ..
}