将变量传递给 jquery AJAX 成功回调中的函数 [英] Pass variable to function in jquery AJAX success callback

问题描述

我正在尝试使用 jQuery AJAX 调用预加载一些图像，但是在将 (url) 字符串传递到 AJAX 调用的成功函数中的函数时遇到了实际问题(如果有道理的话).

I am trying to preload some images with a jQuery AJAX call, but am having real problems passing a (url) string into a function within the success function of the AJAX call (if that makes sense).

这是我的代码:

//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 文件的数量?

One can see my (failed) attempt at passing the url through into the .each() call - url ends up takes the value of increasing integers. Not sure why or what these relate to, maybe the number of jpg files?

...无论如何，它当然应该采用我原始 urls 数组中的单个值.

...anyway, it should of course take the single value in my original urls array.

感谢您的帮助 - 我似乎总是对这些回调有点不理解.

Thanks for any help - I always seem to get in a bit of a twist with these callbacks.

进展?

所以，我有点胡思乱想，注意@ron tornambe 和@PiSquared 的评论，现在我在这里:

So, I mucked around a bit, taking heed of comments from @ron tornambe and @PiSquared and am currently here:

//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) 放在这里和任何地方(在每个嵌套函数等中)，但我得到相同的结果:i 的值只记录为 3.我怀疑这是因为对 i 的所有引用都指向同一件事，并且到异步任务实际到达 image_link(data, i) for... 循环结束并完成(因此值为 3).不用说，这将 urls[i] 设为未定义".

I tried putting the image_link(data, i) here there and everywhere (in each nested function etc.) but I get the same result: the value for i is only ever logged as 3. I suspect that this is because all references to i point to the same thing and by the time the asynchronous task actually gets to image_link(data, i) the for... loop is over and done with (and hence has a value of 3). Needless to say this gives urls[i] as 'undefined'.

任何(更多)提示我如何解决这个问题?

Any (more) tips how I can get round this?

推荐答案

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

Since the settings object is tied to that ajax call, you can simply add in the indexer as a custom property, which you can then access using this in the success callback:

//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/.

Adding in an updated JSFiddle example, as they seem to have changed how their ECHO endpoints work: https://jsfiddle.net/djujx97n/26/.

要了解这是如何工作的，请查看 ajaxSettings 对象上的上下文"字段:http://api.jquery.com/jquery.ajax/，特别是这个注释:

To understand how this works see the "context" field on the ajaxSettings object: http://api.jquery.com/jquery.ajax/, specifically this note:

所有回调中的 this 引用是传递给设置中的 $.ajax 的上下文选项中的对象；如果上下文不是指定，这是对 Ajax 设置本身的引用."

"The this reference within all callbacks is the object in the context option passed to $.ajax in the settings; if context is not specified, this is a reference to the Ajax settings themselves."

这篇关于将变量传递给 jquery AJAX 成功回调中的函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！