页面加载后发生的jQuery .get函数（HAML）答案

【问题标题】：jQuery .get Function Happening After page load (HAML)页面加载后发生的jQuery .get函数（HAML）
【发布时间】：2021-08-25 19:40:01
【问题描述】：

所以我使用 HAML 并循环访问一组 URL [url1, url2, url3] 以便从其页面中提取图像并将其 src 放在另一个页面中。我的代码如下：

urls.each do |url|
   .img{:id => "url_#{url}"}
   :javascript
        var urlID = "#url_" + "#{url}";
        $.get('#{url}').then(function(res){
              var src = $(res).find('.image').attr('src');
              // console.log(urlID);
              $(`{urlID}`).attr('src', src);
            });

但是，这似乎不起作用，因为每当我在 $.get 函数中使用 console.log(urlID) 时，它只会记录最后一个 url 3 次，而不是 url1 url2 url3，我不太确定为什么？这意味着它会替换相同的图像 src 3 次，而不是在每个图像类中显示 3 个单独的图像。有谁知道为什么？

【问题讨论】：

哦，我知道我错过了异步位，非常感谢

标签： javascript html jquery haml

【解决方案1】：

将其包装在 IIFE 中以创建闭包并防止在请求完成之前覆盖变量。

$.get() 是异步的，因此当您多次创建相同的变量时，您会覆盖之前的版本。当请求完成时，它将使用最后一个值

(function(){
    // only scoped in this IIFE closure and
    // not affected by other versions in your loop
    let urlID = "#url_" + "#{url}";
    $.get('#{url}').then(function(res){
          var src = $(res).find('.image').attr('src');
          // console.log(urlID);
          $(`{urlID}`).attr('src', src);
     });

})();

【讨论】：