通过 ajax 使用滚动文本更新 div

Question

我有一个 div，其中包含我正在使用 jquery 在页面上水平滚动的文本。滚动文本 div 的内容是从 mysql 数据库中提取的，并通过 ajax.

每 2 分钟更新一次

我的问题是在第一次 ajax 更新 div 之后，内容一直加载到页面的左边距，然后从页面左侧弹回。您可以通过下面的 url 查看该问题的演示（查看页面底部的黑条）： https://rb.gy/z7nbne

下面是我的代码：

index.php

    <div class="marquee" id="marquee">
      <img src="images/LIVETab.svg" alt="Live Donation Stream Tab" class="livetabimg">
      <div class="marqueecontent">
        <ul id="marqueeitems">
        
        </ul>
      </div>
    </div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script type='text/javascript' src='//cdn.jsdelivr.net/jquery.marquee/1.4.0/jquery.marquee.min.js'></script>
<script>
    $('.marqueecontent').marquee({
        //speed in milliseconds of the marquee
        duration: 1000,
        //gap in pixels between the tickers
        gap: 0,
        //time in milliseconds before the marquee will start animating
        delayBeforeStart: 0,
        //'left' or 'right'
        direction: 'left',
        //true or false - should the marquee be duplicated to show an effect of continues flow
        duplicated: true
    });

    $(document).ready(function(){
      setInterval(function(){
        $('.marqueecontent').marquee('destroy')
        $("#marqueeitems").load('donationstream.php')
      }, 2000);
      $('.marqueecontent').marquee()
    });
</script>

donationstream.php

$con = mysqli_connect("localhost","mydbaseuser","123456","dbasename");
// Check connection
if (mysqli_connect_errno()) 
{
   echo "Failed to connect to MySQL: " . mysqli_connect_error();
   exit();
}

$sql = mysqli_query($con, "SELECT dlevel, donername FROM livedonationticker ORDER BY rowid DESC");
while($drow = mysqli_fetch_array($sql))
{
   extract($drow);
   $donername = stripslashes("$donername");
   $dlevel = stripslashes("$dlevel");
   echo " <li><strong>$dlevel</strong> &#8226; <i>$donername</i></li>";
}

Answer 1

您的代码存在多个问题。让我总结一下：

您想每 2 分钟更新一次数据，但您的代码目前每 2 秒更新一次。 2 分钟的间隔是 120000.
您正在破坏间隔事件处理程序内的选框，但又在它的外面添加，那将不起作用
重新配置选取框时，您不会设置回选项，这意味着新选取框将使用默认选项

看看工作演示，对于您的生产代码，删除并取消注释我评论过的行：

const marqueeOptions = {
  //speed in milliseconds of the marquee
  duration: 5000,
  //gap in pixels between the tickers
  gap: 0,
  //time in milliseconds before the marquee will start animating
  delayBeforeStart: 0,
  //'left' or 'right'
  direction: 'left',
  //true or false - should the marquee be duplicated to show an effect of continues flow
  duplicated: true
};

function loadMarquee() {
  $("#marqueeitems").load('http://molloycollegegala.com/donationstream.php', {}, function() {
    $('.marqueecontent').marquee(marqueeOptions);
  });
}

$(document).ready(function() {
  loadMarquee();
  setInterval(function() {
    console.log("Updating...");
    $('.marqueecontent').marquee('destroy');
    loadMarquee();
  }, 120000);
});

.marquee {
  width: 100%;
  overflow: hidden;
  border: 1px solid #ccc;
  background: #ccc;
}

ul li {
  display: inline;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script type='text/javascript' src='//cdn.jsdelivr.net/jquery.marquee/1.4.0/jquery.marquee.min.js'></script>

<div class="marquee" id="marquee">
  <div class="marqueecontent">
    <ul id="marqueeitems"></ul>
  </div>
</div>

通过 ajax 使用滚动文本更新 div

update div with scrolling text via ajax

jquery

ajax

marquee