Showing notification and open pop-up in site using ajax making site slow down or mysql lock

Question

I am using drupal for website. I have written custom module which is showing notification in browser and also open pop-up in website.

I am using JavaScript function which is being called every 15 second or less if condition is false or error comes.

The problem is if there 5 pages is open then on all pages set timeout function is calling every 15 sec or less on all pages and making site slow or break the site.

Please give some instruction to improve the performance of this site.

(function ($) {
  $(function() {
    // ä»»ä½•éœ€è¦æ‰§è¡Œçš„jsç‰¹æ•ˆ
    setTimeout("countSecond2()", 15000);

    $('body').on('click','#popClose',function(event){
      //jQuery(".pop_content_message").click(function() {
      $(this).parents('#pop').remove();
    });

  });
})(jQuery);

function countSecond() {
  var data = '';
  var need_delay = 0;
  var js_common_messages_popup = '/messages/popup';
  jQuery.ajax({
    url: js_common_messages_popup,
    type : "post",
    dataType : "text",
    data : data,
    async: true,
    success: function(msg) {
      var Obdata = jQuery.parseJSON(msg);
      if(Obdata !=null){
    //alert('1p='+JSON.stringify(msg));
    var call = Obdata.call;
    var output = Obdata.output;
    var selectbox = Obdata.selectbox;
    var checkbox = Obdata.checkbox;
    var url = Obdata.url;
    var need_delay = Obdata.need_delay;
    if (call == '1') {
      browser_notification(Drupal.t('You have a new reminder'), '', url);

      jQuery('#id_pop_task').prepend(output);
      jQuery('#id_pop_task .pop_content_message').show();
      /*jQuery('#id_pop_task').html(output);
      jQuery('#pop').show();
      jQuery("#popClose").click(function() {
        jQuery('#pop').hide();
      });*/

      if (selectbox == '1') {
        //jQuery("#antiStress").selectbox();
            jQuery("[id=antiStress]").selectbox();
      }
      if (checkbox == '1') {
        jQuery('.customR input[type="checkbox"]').ezMark({checkboxCls: "ez-checkbox-green", checkedCls: "ez-checked-green"});
      }
      setTimeout("countSecond2()", 15000);
    }else {
      countSecond2();
    }
      }
      else {
    countSecond2();
      }
    },
    beforeSend: function() {
      //jQuery('#loading').hide();
    },
    complete: function() {
    },
    error: function() {
      countSecond2();
      //location.reload();
    }
  });
}

function countSecond2() {
  var data = '';
  var need_delay = 0;
  var js_common_messages_popup = '/messages/popup2';
  jQuery.ajax({
    url: js_common_messages_popup,
    type : "post",
    dataType : "text",
    data : data,
    async: true,
    success: function(msg) {
      var Obdata = jQuery.parseJSON(msg);
      if(Obdata !=null){
    //alert('2p='+JSON.stringify(msg));
    var call = Obdata.call;
    var output = Obdata.output;
    var selectbox = Obdata.selectbox;
    var checkbox = Obdata.checkbox;
    var url = Obdata.url;
    var need_delay = Obdata.need_delay;
    if (call == '1') {
      browser_notification(Drupal.t('You have a new reminder'), '', url);

      jQuery('#id_pop_task').prepend(output);
      jQuery('#id_pop_task .pop_content_message').show();

      /*jQuery('#id_pop_task').html(output);
      jQuery('#pop').show();
      jQuery("#popClose").click(function() {
        jQuery('#pop').hide();
      });*/
      if (selectbox == '1') {
        //jQuery("#antiStress").selectbox();
            jQuery("[id=antiStress]").selectbox();
      }
      if (checkbox == '1') {
        jQuery('.customR input[type="checkbox"]').ezMark({checkboxCls: "ez-checkbox-green", checkedCls: "ez-checked-green"});
      }
      setTimeout("countSecond2()", 15000);
    }else {
      countSecond();
    }
      }
      else {
    countSecond();
      }
    },
    beforeSend: function() {
      //jQuery('#loading').hide();
    },
    complete: function() {
    },
    error: function() {
      countSecond();
      //location.reload();
    }
  });
}

Majid Abbasi · Answer 1 · 2017-11-11T07:22:19.860

1

In this case i suggest you first detect user is active in your tab and after that send ajax request in the specified periods:

like this one:

$(window).on("blur focus", function(e) {
var prevType = $(this).data("prevType");

if (prevType != e.type) {  
    switch (e.type) {
        case "blur":
            // do work
            break;
        case "focus":
            // do work
            break;
    }
}

$(this).data("prevType", e.type);
})

Also you can use websocket if you want server push data to clients.

More information about detecting active tab provided here: How to tell if browser/tab is active

edited Nov 11 '17 at 07:22

answered Nov 11 '17 at 07:16

Majid Abbasi

1,531
3
12
22

Thanks for your reply. I check – Kunal Kumar Nov 11 '17 at 07:25
But I have showed notification all time if notification is available. So, if I use this code then it will not call Ajax function all time. And notification will not show on time. – Kunal Kumar Nov 11 '17 at 07:50
with this approach if visitor was active on page see notifications and if was not active don't send request to server. when users open tab again you send ajax request and fetch all notifications and show those – Majid Abbasi Nov 11 '17 at 07:56

Showing notification and open pop-up in site using ajax making site slow down or mysql lock

1 Answers1