这个简单的 jquery 用户评论框在大约 5 分钟后崩溃

Question

我使用 jquery 到运行选择随机评论的代码创建了一个旋转的用户评论框，显示它 7 秒，隐藏它并用新评论替换它。

创建了一个 fiddle

该功能基本上运行可以正常使用大约 5 分钟，具体取决于所使用的浏览器。它在 div 准备就绪时启动。该函数选择一个编号为 0 到 5 的随机评论。它检查该评论是否不是之前浏览过的评论。它删除以前的评论，显示新评论，等待 7 秒，然后运行函数再次将当前评论编号作为变量，成为以前的变量。

当它运行时，将显示评论以及新号码和以前的号码以供测试。

它运行很好，数字变了，评论也变了。不会重复审查，因为当它选择一个等于前一个的新数字时，就会选择一个新数字。然后突然间，评论不再显示，尽管数字发生变化或数字在没有 7 秒计时的情况下发生变化。最终导致 jquery 抛出错误并崩溃。

代码如下：

    <span id="dddd"></span>
<div class="tp_box2">
    <div class="tp-box horizontal" id="tp-iframe-widget"  style="overflow:hidden">
        <section class="reviews">
            <div id="tpslides0" style="margin-top: 0px; height:100px">
                <div style="position:relative;display:block;height:100px;padding:6px;overflow:hidden;width:99%">
                    <h1>4.5 stars</h1>
                </div>
            </div>      
            <div id="tpslides1" style="margin-top: 0px; height:100px">
                <div style="position:relative;display:block;height:100px;padding:6px;overflow:hidden;width:99%">
                    <h1>4.0 stars</h1>
                </div>
            </div>      
            <div id="tpslides2" style="margin-top: 0px; height:100px">
                <div style="position:relative;display:block;height:100px;padding:6px;overflow:hidden;width:99%">
                    <h1>3.5 stars</h1>
                </div>
            </div>          
            <div id="tpslides3" style="margin-top: 0px; height:100px">
                <div style="position:relative;display:block;height:100px;padding:6px;overflow:hidden;width:99%">
                    <h1>3.0 stars</h1>
                </div>
            </div>          
            <div id="tpslides4" style="margin-top: 0px; height:100px">
                <div style="position:relative;display:block;height:100px;padding:6px;overflow:hidden;width:99%">
                    <h1>2.5 stars</h1>
                </div>
            </div>          
        </section>
    </div>
</div>

还有 jquery - 我使用的是 v2.1.3，但它在 1.11 和 1.10 上也会崩溃

function rotate_tp(previousslide) {
    $activeslide = Math.floor((Math.random() * 5));
    $('#dddd').html($activeslide + ' ' + previousslide);
    if( $activeslide == previousslide) { $activeslide = ""; rotate_tp(previousslide); };
    $('#tpslides'+previousslide).hide().css('z-index','-1'); $('#tpslides'+$activeslide).css('z-index','100').fadeTo( "slow" , 1);
    setTimeout(function() { rotate_tp($activeslide); }, 7000);


};
$('#tp_box2').ready(
function(){
    $("[id^=tpslides]").hide().css('z-index','-1');
    rotate_tp();

});

css 对于那些可能想看的人：

p:first-letter, h3:first-letter { text-transform: capitalize; }

.tp-box 
{
  font-size: 11px;
  background:#F7F7F7;
  display:block;
  float:right;
  color:#666;
  position:relative;
  width:100%;
  border-top:1px solid transparent;
  border-bottom:1px solid transparent;
  background: #f1ebe8; 
    transition: all 4s;
    -webkit-transition: all 4s;
    -moz-transition: all 4s;
}
.tp-box a {
  color:#666;
}
.tp-box:hover 
{
  border-top:1px solid #E5E2D7;
  border-bottom:1px solid #E5E2D7;
  background: #F7F9F8; 
    transition: all 4s;
    -webkit-transition: all 4s;
    -moz-transition: all 4s;
}
.tp-box.horizontal{
   float: none ;
  clear: both ;
  max-height: 100px !important;
  height:86px;
}

.tp-box header {

  text-align:center;
  padding:6px 10px 12px;
}
.tp-box.horizontal header{

    float: left ;
}

.tp-box header h1 { 
  font:bold 2.182em/1.255em sans-serif;
  margin:0;
}

.tp-box header p.review-count { 
  margin:5px 0 0;
 }
.tp-box .review-count a { 
  text-decoration:none;
}

.tp-box section.reviews h1 {
  background:#DDDDDD;
  font-size:1.273em;
  font-weight:700;
  color:#444444;
  padding:5px 10px;
  margin-bottom: 10px ;
}

.tp-box section.reviews {
  display:block;
  overflow:hidden;
  margin:0;
}
.tp-box.horizontal section.reviews{
  height: 100px ;
  overflow: hidden ;
}

.tp-box section.reviews article {
 /* border:1px solid #DDDDDD;
  border-radius:4px;*/
  margin:0px 10px 10px 0px;
  padding:3px 0px 10px 0px;
  position: relative ;
 /*clear: both ;*/
  float:left;
  /* width:180px;
( overflow:hidden;*/
}

.tp-box section.reviews article a {
  color:#CE5600;
}

.tp-box section.reviews article:last-child {
  border-bottom:none;
  margin-bottom:0;
}

.tp-box time {
  display:block;
  -moz-opacity:0.6;
  opacity:0.6;
  position:absolute;
  top:0;
  right:0;
  text-transform:uppercase;
}

.tp-box h3 {
  clear:both;
  color:#444444;
  font-size:1.091em;
  font-weight:700;
  padding:6px 0 0;
}

.tp-box p.desc {
  padding:0 0 0px;
}

.tp-box img.user-img {
  float:left;
  padding:0 6px 0 0;
}

.tp-box p.author {
  position:relative;
  font-style:italic;
  top:-2px;
}

.tp-box a.footer {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px; 
  border-radius: 5px;
  font-size:11px;
  font-weight:700;
  display: block ;
  margin:0px auto;
  width:90px;
  text-transform:uppercase;
  text-decoration:none;
  color:#000;
  line-height: 22px ;
  padding-left: 12px ;
  background: #DDD url(https://github.com/trustpilot/developers/raw/master/assets/img/icon_flat_mini.png) 2px center no-repeat;
}

.tp-box a.footer span.pilot {
  color:#444;
}

Answer 1

在检查当前幻灯片和之前的幻灯片是否相同之后，您没有 return 方法。这意味着它继续执行，为另一个方法调用设置一个计时器，因此你变得很奇怪。

if( $activeslide == previousslide) { $activeslide = ""; rotate_tp(previousslide);};

在此处添加 return 语句：

if( $activeslide == previousslide) { $activeslide = ""; rotate_tp(previousslide); return;};

这个简单的 jquery 用户评论框在大约 5 分钟后崩溃

This simple jquery user review box crashes after about 5 minutes

html

javascript

crash

random

jquery