有一个数据列表,其中包含来自服务器的库存信息,我使用它们如下
<div class="stockname">microsoft</div><div class="stockprice">1000</div>
<div class="stockname">yahoo</div><div class="stockprice">300</div>
<div class="stockname">google</div><div class="stockprice">800</div>
<div class="stockname">facebook</div><div class="stockprice">600</div>
<script src="/assets/js/jquery-3.3.1.min.js" type="text/javascript"></script>
<script language="javascript">
function startRefresh() {
$(".stockprice").load(location.href+" .stockprice");
$('.stockprice').fadeOut(500);
$('.stockprice').fadeIn(500);
}
$(function() {
startRefresh();
setInterval("startRefresh()", 10000);
});
</script>
我想每隔10秒更新一次股票价格,并将当前股价与上次比较,如果当前股价与上次不同,相应的div
部分应该闪烁,如果价格相同,什么都不做,有任何想法吗?
你需要传递一个函数,而不是将字符串"startRefresh()"
传递给setInterval()
。更正它,以下是解决问题的方法:
function startRefresh() {
var previousValue = $('.stockprice').text();
$(".stockprice").load(location.href + " .stockprice", function() {
var newValue = $('.stockprice').text();
if (previousValue !== newValue) {
$('.stockprice').fadeOut(500).fadeIn(500);
}
});
}
$(function() {
setInterval(function() { startRefresh(); }, 10000);
});
基本上,您可以使用text()
检查元素的现有值。在加载新内容之前将其存储在临时变量中。加载后,您可以将新值与旧值进行比较。如果它们不相同,则闪烁元素。