Question

对不起，我已经阅读了几个类似问题的回复，但我似乎无法理解它们应用于我自己的问题。我希望看到我自己的代码的解决方案有助于点击它！

我正在使用画布图像，并且在我尝试从它们中获取数据之前需要确保它们已加载。所以，我正在使用for循环将脚本的最后部分分配给每个图像的onload事件。

我怀疑问题是我的变量在onload事件触发时没有被保留，但是在我的生活中不能弄明白如何解决这个问题。这是我最接近的尝试，它实际上适用于最终幻灯片。没有错误，但setSliderBG似乎没有应用于除最终幻灯片之外的任何错误：

    function loadCanvasImages(){
        var slides = $('.slide');
        var num_of_slides = slides.length;
        for(i = 0; i < num_of_slides; i++){
            var slide = slides.eq(i);
            var img_url = slide.css('background-image');
            var canvas = document.getElementById('slide_' + i);
            var the_image = new Image();
            the_image.src = img_url.slice(5, -2);
            globalTestVar = canvas;
            the_image.onload = (function(){
                setSliderBG(slide, canvas, the_image);
            });
        }
    }

以下是相关代码：

    function getSliderColor(canvas){
        var context = canvas.getContext('2d');
        var sample_pixel = context.getImageData(0, 0, 1, 1);
        var rgba = sample_pixel.data[0] + ", " + sample_pixel.data[1] + ", " + sample_pixel.data[2] + ", " + sample_pixel.data[3];

        return rgba;
    }

    function setSliderBG(slide, canvas, the_image){
        var context = canvas.getContext('2d');
        context.drawImage(the_image, 0, 0);
        var rgba = getSliderColor(canvas);
        slide.css("background-color", "rgba(" + rgba + ")");
    }

谢谢！

EDIT 没关系，我明白了。我忽略了我需要让我的匿名函数实际返回一个函数。我将代码更改为：

            the_image.onload = (function(slide, canvas, the_image){
                return function(){
                    setSliderBG(slide, canvas, the_image);
                }
            })(slide, canvas, the_image);

现在一切都很好看。仍然试图真正理解为什么会这样，但我会得到它。

如何在匿名函数中保留循环变量

0 个答案: