我有一段代碼每 10 秒向服務器發送一次請求并提取資訊 發生這種情況時會播放聲音，但是如果將新行添加到資料庫中，我希望播放聲音 現在每個都播放音頻運行 reloadData 的時間
js代碼
<script>
setInterval(function() {
reloadData();
}, 10000);
function reloadData(){
$.ajax({
url: "<?=baseUrl()?>/panel/players"
}).done(function(data){
$("#players").empty();
$("#players").append(data);
var audio = new Audio('Audio.mp3');
audio.play();
});
}
$(function() {
reloadData();
});
</script>
控制器
public function players()
{
$data['players'] = SellModel::fetchPlayer();
View::renderPartial('panel/players.php' , $data);
}
模型
public static function fetchPlayer()
{
$db = Db::getInstance();
$record = $db->query("SELECT * FROM h_player WHERE status=1");
return $record;
}
uj5u.com熱心網友回復：
要執行您需要的操作，您可以檢索更新前#players包含的元素數量，并將其與更新后包含的元素數量進行比較。如果它們不同，則播放聲音。
下面的示例假定行元素是 的直接子元素#players，但如果 HTML 不是這種精確結構，則可以輕松修改。
let firstLoad = true;
function reloadData() {
let $players = $('#players');
$.ajax({
url: "<?=baseUrl()?>/panel/players"
}).done(function(data) {
var oldCount = $players.children().length;
$players.html(data);
let newCount = $players.children().length;
if (!firstLoad && oldCount < newCount) {
var audio = new Audio('Audio.mp3');
audio.play();
}
firstLoad = false;
});
}
順便說一句，請注意 AJAX 輪詢不是好的做法，應盡可能避免，因為它無法擴展。更好的方法是使用帶有 Websockets 之類的觀察者模式來保持 UI 和服務器端資料緊密同步，但是這將需要重新撰寫處理玩家資料更新的服務器端邏輯。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/439720.html