Javascript 在使用ajax重新设计内容后，它会停止

我试图用slick实现一个简单的旋转木马，但是旋转木马项目应该通过AJAX每隔几秒钟刷新一次

问题是，内容刷新后，滑溜刹车。此外，在我的控制台，我没有得到任何错误

因此，我的HTML如下所示：

<div class="live-carousel" data-slick="off">
    <div class="score-container">
        <div class="item">
            <div class="score">
                <p>
                    <a href="#">Team A</a> <span>0</span>
                </p>
                <p>
                    <a href="#">Team B</a> <span>2</span>
                </p>
                <span class="has_info"></span>
            </div>
            <div class="info">
                <dl>
                    <dt><a href="#">Team A</a></dt>
                    <dd>Player name <span>12'</span></dd>
                </dl>
            </div>
        </div>
    </div>
</div>

var getLive = function() {

var $score_flipping_cards = $( '#score_flipping_cards' );
var $live_carousel = $('.live-carousel');
var $slick = null;

if ( 0 < $score_flipping_cards.length ) {
    $.ajax(
        {
            url     : z.ajaxurl,
            type    : 'POST',
            data    : {
                action : 'get_live'
            },
            success : function ( data, textStatus, jqXHR ) {
                var $template = _.template( $score_flipping_cards.html() );
                var $counter  = 0;

                if ( null !== $slick ) {
                    $live_carousel.slick('unslick');
                }

                $live_carousel.empty();

                var a = $.map(data, function(value, index) {
                                        return [value];
                });

                _.each(
                    a,
                    function( $match ) {
                        _.each(
                            $match,
                            function( $game ) {
                                var $goals = [];
                                var $template_data = {};

                                ++$counter;

                                $template_data.livePage = $game.livePageURL;
                                $template_data.team_a = $game.TeamAName;
                                $template_data.team_a_score = $game.TeamAScore;

                                $live_carousel.append( $template( $template_data ) );

                                if( $match.length === $counter ) {
                                        $slick = true;
                                        make_slick($live_carousel);
                                    }
                                }
                            );
                        }
                    );
                }
            }
        );
    }
};

getLive();

setInterval(
    getLive,
    8000
);

var make_slick = function ($live_carousel) {
        $live_carousel.slick (
            {
                accessibility : true,
                autoplay : true,
                cssEase : 'ease-in-out',
                easing : 'ease-in-out',
                lazyLoad : 'progressive',
                infinite       : true,
                slidesToShow   : 5,
                slidesToScroll : 5,
                dots           : true,
                speed          : 300,
                responsive     : [
                    {
                        breakpoint : 1024,
                        settings   : {
                            slidesToShow   : 5,
                            slidesToScroll : 5
                        }
                    },
                    {
                        breakpoint : 600,
                        settings   : {
                            slidesToShow   : 3,
                            slidesToScroll : 3
                        }
                    },
                    {
                        breakpoint : 480,
                        settings   : {
                        slidesToShow   : 1,
                        slidesToScroll : 1
                    }
                }
            ]
        }
    );
};

我的灵巧启动功能是这样的：

<div class="live-carousel" data-slick="off">
    <div class="score-container">
        <div class="item">
            <div class="score">
                <p>
                    <a href="#">Team A</a> <span>0</span>
                </p>
                <p>
                    <a href="#">Team B</a> <span>2</span>
                </p>
                <span class="has_info"></span>
            </div>
            <div class="info">
                <dl>
                    <dt><a href="#">Team A</a></dt>
                    <dd>Player name <span>12'</span></dd>
                </dl>
            </div>
        </div>
    </div>
</div>

var getLive = function() {

var $score_flipping_cards = $( '#score_flipping_cards' );
var $live_carousel = $('.live-carousel');
var $slick = null;

if ( 0 < $score_flipping_cards.length ) {
    $.ajax(
        {
            url     : z.ajaxurl,
            type    : 'POST',
            data    : {
                action : 'get_live'
            },
            success : function ( data, textStatus, jqXHR ) {
                var $template = _.template( $score_flipping_cards.html() );
                var $counter  = 0;

                if ( null !== $slick ) {
                    $live_carousel.slick('unslick');
                }

                $live_carousel.empty();

                var a = $.map(data, function(value, index) {
                                        return [value];
                });

                _.each(
                    a,
                    function( $match ) {
                        _.each(
                            $match,
                            function( $game ) {
                                var $goals = [];
                                var $template_data = {};

                                ++$counter;

                                $template_data.livePage = $game.livePageURL;
                                $template_data.team_a = $game.TeamAName;
                                $template_data.team_a_score = $game.TeamAScore;

                                $live_carousel.append( $template( $template_data ) );

                                if( $match.length === $counter ) {
                                        $slick = true;
                                        make_slick($live_carousel);
                                    }
                                }
                            );
                        }
                    );
                }
            }
        );
    }
};

getLive();

setInterval(
    getLive,
    8000
);

var make_slick = function ($live_carousel) {
        $live_carousel.slick (
            {
                accessibility : true,
                autoplay : true,
                cssEase : 'ease-in-out',
                easing : 'ease-in-out',
                lazyLoad : 'progressive',
                infinite       : true,
                slidesToShow   : 5,
                slidesToScroll : 5,
                dots           : true,
                speed          : 300,
                responsive     : [
                    {
                        breakpoint : 1024,
                        settings   : {
                            slidesToShow   : 5,
                            slidesToScroll : 5
                        }
                    },
                    {
                        breakpoint : 600,
                        settings   : {
                            slidesToShow   : 3,
                            slidesToScroll : 3
                        }
                    },
                    {
                        breakpoint : 480,
                        settings   : {
                        slidesToShow   : 1,
                        slidesToScroll : 1
                    }
                }
            ]
        }
    );
};

如您所见，如果已启动旋转木马，我将取消单击旋转木马，并在将项目附加到旋转木马容器中后再次启动滑动旋转木马

页面第一次加载旋转木马时会正常启动，但在第二次ajax调用后，旋转木马会停止

---

有人可以帮忙吗？

通过搜索未解决的问题到达这里，不知道问题是否仍然存在。因此，setInterval和ajax的成功都是异步运行的，因此可能存在同步问题（getLive->ajaxResponse）。因此，您可以尝试在每次ajaxResponse之后调用setTimeout，也可以在每次在timer中调用

getLive

查找DOM对象时，将它们保存在某个变量中，并从内部闭包函数中使用它们，该函数将在间隔内运行。您好@KoushikChatterjee，谢谢您的回复。这个问题大约在一年前解决了：）。再次感谢你。