使用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作為類傳遞給appendcharacter

前

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