Jquery ajax如何更新html元素而不是每隔x秒监听更新？

Question

Is there a way to check new updates in the database without using setInterval? The problem is that I want to update the video source in the video tag but if I check for update every second, then my video will keep refreshing. I just want the video to refresh if the database is updated. For example, If I have a cat video in the current_video column in database, then the cat video should play. Otherwise, if I update the video to dog video, only then will the video element change to dog video.

$.get("/musicmania/playing/getCurrentSongDir", function(data, status){
    setInterval(function(){
            $("#video").html("<source src='/musicmania/app/resources/"   
            + data + "' type='video/mp4'></source>");
    }, 500);
});

Answer 1

You can add if statement and check if old data and the new one are not equal then refresh the video. Your code will look something like this.

var old_data='';
$.get("/musicmania/playing/getCurrentSongDir", function(data, status){
   if( old_data != data ) {
       $("#video").html("<source src='/musicmania/app/resources/"   
        + data + "' type='video/mp4'></source>");
   }
   old_data = data;
});

If you want to do it via ajax technology you have to send request every 'x' seconds. But there is another technology called websockets. You can use websockets if you don't want to open connection to server side every 'x' seconds.