小编典典

将变量传递给jQuery AJAX成功回调中的函数

ajax

我正在尝试通过jQuery AJAX调用预加载一些图像,但是在将(url)字符串传递到AJAX调用的成功函数内的函数时遇到了实际问题(如果有意义)。

这是我的代码,原样:

//preloader for images on gallery pages
window.onload = function() {
    setTimeout(function() {     
        var urls = ["./img/party/"]; //just one to get started

        for ( var i = 0; i < urls.length; i++ ) {
            $.ajax({
                url: urls[i],
                success: function(data,url) {
                    $(data).find("a:contains(.jpg)").each(function(url) {                               
                        new Image().src = url + $(this).attr("href");
                    });
                }
            });
        };  
    }, 1000);
};

可以看到我(失败的)尝试将url传递到.each()调用中-
url最终得到了递增整数的值。不确定为什么或与这些东西有什么关系,也许是jpg文件的数量?

…无论如何,它当然应该在我原始的urls数组中使用单个值。

感谢您的帮助-我似乎总是对这些回调有点不满意。


程序?

所以,我有点混了,听了@ron tornambe和@PiSquared的评论,目前在这里:

//preloader for images on gallery pages
window.onload = function() {
    var urls = ["./img/party/","./img/wedding/","./img/wedding/tree/"];

    setTimeout(function() {
        for ( var i = 0; i < urls.length; i++ ) {
            $.ajax({
                url: urls[i],
                success: function(data) {
                    image_link(data,i);
                    function image_link(data, i) {
                        $(data).find("a:contains(.jpg)").each(function(){ 
                            console.log(i);
                            new Image().src = urls[i] + $(this).attr("href");
                        });
                    }
                }
            });
        };  
    }, 1000);       
};

我尝试将image_link(data, i)here
放在任何地方(在每个嵌套函数等中),但得到的结果是相同的:for的值i只记录为3。我怀疑这是因为所有引用都i指向同一个事物并且由时间异步任务实际获取到image_link(data, i)for...循环是完全断绝了(因此具有值为3)。不用说这给出urls[i]了“未定义”。

还有(更多)技巧可以解决这个问题吗?


阅读 252

收藏
2020-07-26

共1个答案

小编典典

由于设置对象与该ajax调用相关联,因此您可以简单地将索引器添加为自定义属性,然后可以this在成功回调中使用以下属性进行访问:

//preloader for images on gallery pages
window.onload = function() {
    var urls = ["./img/party/","./img/wedding/","./img/wedding/tree/"];

    setTimeout(function() {
        for ( var i = 0; i < urls.length; i++ ) {
            $.ajax({
                url: urls[i],
                indexValue: i,
                success: function(data) {
                    image_link(data , this.indexValue);

                    function image_link(data, i) {
                        $(data).find("a:contains(.jpg)").each(function(){ 
                            console.log(i);
                            new Image().src = urls[i] + $(this).attr("href");
                        });
                    }
                }
            });
        };  
    }, 1000);       
};

编辑:
添加了一个更新的JSFiddle示例,因为他们似乎已经更改了其ECHO端点的工作方式:https
://jsfiddle.net/djujx97n/26/ 。

要了解其工作原理,请参见ajaxSettings对象上的“
context”字段:http
://api.jquery.com/jquery.ajax/ ,特别是以下注意事项:

this所有回调中的引用是context选项中设置中传递给$ .ajax的对象;如果未指定context,则是对Ajax设置本身的引用。”

2020-07-26