JS怎么在事件绑定的闭包内控制外部函数的返回值?

1.函数功能:我现在有一个函数,这个函数可以传递一个参数进去。这个函数的主要功能是绑定各种事件处理函数,这些绑定的事件处理函数将会对传递进去的参数进行处理,并最终将处理后的结果通过闭包外的函数返回出去。
2.遇到的问题:事件处理函数是一些闭包,我不清楚怎么在闭包内控制外部函数的返回值。
3.代码比如是这样:

var canvas = document.getElementById("#canvas"); // 一个已经存在的canvas元素function test(canvas, src) { // src是一个图片的url
    var context = canvas.getContext("2d");    var img = new Image();
    img.src = src;
    img.onload= function() {
        context.drawImage(img, 0, 0, 100, 100);        return canvas; // 预期目标是在这里实现外部函数test返回新的canvas对象
    };
}var newCanvas =  test(canvas, "abc.png"); //在此处预期取得新的canvas对象供别处使用

4.问题补充说明:
一、预期是:处理过后的新canvas对象作为test函数的返回值,但是如果在闭包外写return,返回的值将会是未经处理的canvas,所以我觉得应该在img.onload对应的闭包内将新的canvas传递出去返回,但是不知道怎么实现;
二:必须要作为返回值传出,因为我还有别的函数依赖于这个新的canvas传递过去才能执行,所以需要取得返回值以后才能执行。
三:可能我的示例代码不够清楚,其实这里var newCanvas = test(canvas, "abc.png");我原来代码中newCanvas是一个已经建立的访问器变量,在给它赋值的时候会调用访问器里的setter,这样就可以让img加载完以后立刻执行想执行的指令。类似于监听数据变化,根据数据变化执行指令一样。而且只要给不同的访问器变量赋值,就可以执行不同的指令。


富国沪深
浏览 941回答 1
1回答

森栏

使用回调函数吧:var canvas = document.getElementById("#canvas"); // 一个已经存在的canvas元素          function test(canvas, src, callback) { // src是一个图片的url         var context = canvas.getContext("2d");        var img = new Image();         img.src = src;         img.onload= function() {             context.drawImage(img, 0, 0, 100, 100);            callback(canvas)         };     }         var newCanvas;     test(canvas, "abc.png", function (canvas){        newCanvas = canvas     })
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript