Question

我有一个功能，在底部我正在做console.log。

现在我想要运行这个函数两次，为了保持简单，我想我只是将整个函数复制/粘贴到第一个函数下面。

问题是控制台现在输出三次;第一个，第二个，然后是第一个。为什么会这样？我应该怎么做只输出两次？

(function test (dx, dy, w, h) {
    // arguments:
    // pixels region to read, from canvas upper right corner
    // note that height (h) counts upwards

    // they store context in global GLctx var, but it seem to expire often, so grab the current one
    var GLctx = document.getElementById ('glcanvas').getContext ('webgl');

    // we need to wait until after they are done drawing stuff, so we intercept requestAnimationFrame
    var rAF = window.requestAnimationFrame;
    window.requestAnimationFrame = function () {
        rAF.apply (window, arguments); window.requestAnimationFrame = rAF;

        var pixels = new Uint8Array (w * h * 4);
        GLctx.readPixels (GLctx.canvas.width - dx, GLctx.canvas.height - dy, w, h, GLctx.RGBA, GLctx.UNSIGNED_BYTE, pixels);

        if (pixels[3] == 0) {
            // blank image - retry
            return test (dx, dy, w, h);
        }

        // debug: log the pixels
        //console.log (pixels);

        // debug: see the pixels
        var canvas = document.createElement ('canvas'); canvas.width = w; canvas.height = h;
        var imageData = canvas.getContext ('2d').getImageData (0, 0, w, h);
        for (var x = 0; x < w; x++) for (var y = 0; y < h; y++) for (var p = 0; p < 4; p++) {
            // actual pixels data comes upside-down
            imageData.data[4 * (w * (h - y - 1) + x) + p] = pixels[4 * (w * y + x) + p];
        }
        canvas.getContext ('2d').putImageData (imageData, 0, 0);
        //console.log (canvas.toDataURL ());

        // from the screenshot, their green color RGB values seem to be 43 171 63
        // so we can test for the pixel to be green by something like g > 170
        var count = 0;
        var count2 = 0;
        for (var p = 0; p < pixels.length; p += 4) {
            //rgb(58, 66, 85)
            var red = pixels[p], green = pixels[p + 1], blue = pixels[p + 2];

             if (green > 170) count++; 
             if (green > 120) count2++;             

        }


        if(count == 48){ count = 1};
        if(count == 61){ count = 7};
        if(count == 78){ count = 3};

        if(count == 83){ 

          if(count2 == 105){ count = 2}; 
          if(count2 == 115){ count = 9}; 

        }

        if(count == 85){ count = 6};

        if(count == 87){

         if(count2 == 109){ count = 4}; 
         if(count2 == 105){ count = 5};

        }

        if(count == 90){ count = 0};
        if(count == 100){ count = 8};


        console.log(count);


    };
}) (59, 393, 15, 29);

Answer 1

根据您提供的代码，问题似乎来自您检查空白图片的if (pixels[3] == 0) { // blank image - retry return test (dx, dy, w, h); }语句：

test()

如果满足条件，将调用console.log，因此如果多次生成空白图像，则最终可能会调用比预期更多的函数。

要查看问题所在，请插入test()语句，以便查看此条件评估为真的频率，从而调用if (pixels[3] == 0) { // blank image - retry console.log('blank image... calling test()'); return test (dx, dy, w, h); }。

这样的事情会起作用：

test()

然后您可以看到if检查后调用{{1}}的频率。

控制台日志在功能上输出太多次

1 个答案: