时间戳

首页 > 解决方案 > 我每秒执行一次 Ajax 调用，但如果内容发生更改，我将替换图像源。这会导致图像破裂

javascript - 我每秒执行一次 Ajax 调用，但如果内容发生更改，我将替换图像源。这会导致图像破裂

问题描述

我有来自 LastFM 的广播。所以为了保持更新，我必须每秒发送一次 ajax 调用。如果数据发生变化，我的图像源和标题都应该改变。但在我的情况下，标题更改并且图像中断。

$.ajax({
  url: 'urltolastfm',
  success: function(data) {
    if ($('#thumbnail').attr('src') !== data.recenttracks.track[0].image[3]['#text']) {
      $('#thumbnail').hide();
      $('#thumbnail').attr('src', data.recenttracks.track[0].image[3]['#text']); // this is where i change the source
      $('#thumbnail').show();
    }
  }
});

标签： javascript

解决方案

实际的错误是我在加载页面时进行了 ajax 调用，然后每隔一秒就进行 ajax 调用，并使用数据更改段落行。导致数据溢出。所以我创建了一个单一的 ajax 调用作为一个函数，然后使用超时来调用它。

  function checkThumbnail() {
            if ($('#thumbnail').length > 0) {
                return true;
            } else {
                return false;
            }
        }

        function fetchdata() {
            $.ajax({
                url: 'https://ws.audioscrobbler.com/2.0/?method=user.getRecentTracks&user=evillarreal42&api_key=6c7cf66516c75e782226590e933f6c6b&format=json&limit=1',

                success: function(data) {
                    if ($('#thumbnail').attr('src') !== data.recenttracks.track[0].image[3]['#text']) {
                        $('#lastfm').empty().append(
                            '<h6 class="marg" style="margin-bottom:10px;  text-align:center;"><span class="mon" style="color:black; text-align:center">● Now playing → "' +
                            data.recenttracks.track[0].name + '" by ' + data.recenttracks.track[0]
                            .artist['#text'] + ' from ' + data.recenttracks.track[0].album[
                                '#text'] + ' </span></h6>');
                        if (!checkThumbnail()) {
                            $('#foot').fadeToggle( "slow", "linear" );
                            var img = $('<img id="thumbnail">'); //Equivalent: $(document.createElement('img'))
                            img.attr('src', data.recenttracks.track[0].image[3]['#text']);
                            img.css({
                                "position": "absolute",
                                "top": "50%",
                                "left": "50%",
                                "width": "250px",
                                "height": "250px",
                                "margin-top": "-125px",
                                /* Half the height */
                                "margin-left": "-125px",
                                "display": "none",
                                "z-index": "22" /* Half the width */
                            });
                            img.appendTo('.bgg');
                        } else {
                            $('#thumbnail').attr('src', data.recenttracks.track[0].image[3]['#text']);
                        }
                    }
                }
            });
        }

        $(document).ready(function() {
            setInterval(fetchdata, 1000);});

推荐阅读