jquery two .get（）函数的工作方式不同

第一个.get()函数在所有浏览器中都能正常工作，第二个函数只能在Firefox中每次运行，大约每隔两次在Chrome中运行，而在IE中则完全不运行。jquery two .get（）函数的工作方式不同

该代码被包装在一个$(document).ready函数中，所以它不应该是页面加载的问题。

第一个.get()函数从RSS提要中获取最新消息并将它们发布在<ul>中。第二个.get()函数从不同的RSS提要获取相同的内容并以类似的方式发布它们，但区别在于它也获取图像源，并将这些图像绘制到代码最后部分的<canvas>元素中。

即使没有将图像绘制到画布元素中，也没有获取图像源，第二个.get（）函数在Chrome中每次都不起作用，从不在IE中工作。每个浏览器中的第一个工作。

我也使用类似的代码将一些其他图像绘制到画布元素中，并且它在任何地方和任何时候都能正常工作。

//The first, working .get() function: 
$.get("rss-url", function (data) { 
    var $xml = $(data); 
    var $i = 0; 
    $xml.find("item").each(function() { 
     var $this = $(this), 
      item = { 
       title: $this.find("title").text(), 
       link: $this.find("guid").text(), 
       pubDate: $this.find("pubDate").text(), 
      } 
     //Do something with item here... 
     if ($i < 10) { 
      var pv = new Date(item.pubDate).toLocaleString(); 
      $("#uutiset_latest > ul").append("<li><a href=" + item.link + ">" + item.title + "</a><br>" + pv + "</li>"); 
     } 
     $i++; 
    }); 
}); 


//Second, not so working .get() function: 

$(function() { 
    var img0, img1, img2; 
    $.get("rss-url", function (data) { 
     var $xml = $(data); 
     var $i = 0; 
     $xml.find("item").each(function() { 
      var $this = $(this), 
       item = { 
        title: $this.find("title").text(), 
        link: $this.find("guid").text(), 
        pubDate: $this.find("pubDate").text(), 
        pic: $this.find("description").html() 
       } 
      if ($i < 3) { 
       var pv = new Date(item.pubDate).toLocaleString(); 
       var parsed = $('<div/>').html(item.pic); 
       var picSrc = parsed.find("img").attr("src"); 
       $("#right_column_feed > ul").append("<li><a href=" + item.link + ">" + item.title + "</a><div id='tsemppi_div" + $i.toString() + "'><canvas id='tsemppi_canvas" + $i.toString() + "' width='150' height='100' class='tsemppi_canvas'></canvas></div>" + pv + "</li>"); 
      } 
      switch ($i) { 
       case 0: img0 = picSrc; break; 
       case 1: img1 = picSrc; break; 
       case 2: img2 = picSrc; break; 
      } 
      $i++; 
     }); 
     drawImages2(); 
    }); 

//the function to draw the images into <canvas> elements: 

    function drawImages2() { 
     var imgWidth = 150; 
     var imgHeight = 100; 
     var $z = 0; 

     $(".tsemppi_canvas").each(function() { 
      var ctx = document.getElementById("tsemppi_canvas" + $z.toString()).getContext("2d"); 
      var canvImage = new Image(); 
      canvImage.onload = function() { 
       ctx.drawImage(canvImage, 0, 0, imgWidth, imgHeight); 
      } 
      switch ($z) { 
       case 0: canvImage.src = (img0); break; 
       case 1: canvImage.src = (img1); break; 
       case 2: canvImage.src = (img2); break; 
      } 
      $z++; 
     }); 
    }; 
});

所有这些功能都在同一个.js文件，图像，网页和RSS feeds是相同的服务器.js文件上。

来源

2013-07-24 Sabotaasi

至于你说的 - 第二个'get（）'使用不同的RSS feed - 可能有问题。你有没有尝试第一个'get（）'第二个RSS和第二个'get（）'与第一个RSS？ – furas

如果我交换rss-urls，功能不会改变。第一个工作，第二个工作如前所述。 – Sabotaasi

所以问题不是来自RSS的数据，也不是'get（）'，而是你的代码在'function（data）{...}'中。您可以使用alert（）来测试代码中的变量。也许他们得不到你的期望。如果你使用firebug，你可以在代码中使用'console.log（“some text”）'来查看萤火虫控制台的结果 - 它比'alert（）'更舒服。 – furas

好吧，我想通了，这是这一行：

pic: $this.find("description").html()

我改变了它来获取文本，而不是HTML，现在它在每个浏览器的工作原理：

pic: $this.find("description").text()

来源

2013-07-25 09:01:11 Sabotaasi

jquery two .get（）函数的工作方式不同

回答

相关问题