每5秒执行一次jquery并带有change事件

Question

im having a chart which will be updated every 5 seconds to show the how many users have entered a building and the user has an option to select how many users are on each floor. this is also updated every 5 seconds

below is my code to get the users entered the building

var interval = 5000; 
function get_Users() {
     var users=   $.ajax({
            type: 'POST',
            url: '<?php echo base_url('index.php')?>/building/feed',
            data: $(this).serialize(),

            success: function (users) {
                 $('.current').html(users); 

            },
            complete: function (users){

                    setTimeout(get_Users, interval);
            }
    });
}
setTimeout(doFeed, interval);

below is used to get the users on each floor

$(document).on('change','.floor',function(){
    $.ajax({
        url: 'floor/chart',
        type: 'post',
        data: asset,
        dataType: 'json',
        success: function (users) {

             $(".current").html(users.floor);
        },


    });
});

what i need to do is once its successfully changed, post and get the chart values every 5 seconds..

how can this be done? any help will be appreciated.

Answer 1

You could do that by create a named function for change handler and trigger a timeout function once the first one complete as you have done it for other function in your code.

$(document).on('change','.floor',changeFloorHandler);

 function changeFloorHandler() {
   $.ajax({
    url: 'floor/chart',
    type: 'post',
    data: asset,
    dataType: 'json',
    success: function (users) {
         $(".current").html(users.floor);
    },
    complete: function (users){
        setTimeout(changeFloorHandler, interval);
    }
  });
 }

Note: I would suggest you to have a common ajax function in your code with custom parameters holding callback functions reference for timeout instead of multiple function definitions to avoid redundant code.