Блог

Я пытаюсь загрузить окно чата при нажатии на имя контакта. При начальной загрузке отображается почтовый ящик. Все функции работают нормально, пока я не попытаюсь щелкнуть имя контакта во второй раз. Он загружает новый чат контактов, но также отображает исходный чат контактов, хотя я установил clearTimeout().

Вот файл JS —

 $(document).ready(function(){ 
    var contactTimeout;
    var inboxTimeout;

   function contact() {
       var fromName = $('#from').val();
       var toName = $("#to").val();
       $(".chat-title").replaceWith("<div class='chat-title'>"   toName   "</div>");
       $(".chat-form").fadeIn(100);

       $.ajax('chat/get-chat.php', {
          data: ({ to: toName,from: fromName}),
          type: "POST",
          success: function(data) {
              $(".chat-body").replaceWith("<div class='chat-body'>"   data   "</div>");
              contactTimeout = setTimeout(contact, 2000);
          } 
      }); 
   }

   function inbox() {
      var user = $('#from').val();
      $.ajax('chat/get-chat-inbox.php', {
          data: ({ user: user}),
          type: "POST",
          success: function(data) {
              $(".chat-body").replaceWith("<div class='chat-body'>"   data   "</div>");
              inboxTimeout = setTimeout(inbox, 2000);
           }
       }); 
     }


     // Load inbox when chat box is opened
     $(".chat-arrow").click(function(){
         clearTimeout(contactTimeout);
         inbox();
     });

     // Load chat from contact name
     $(".contact-name").click(function() {
         clearTimeout(contactTimeout); // Here I try and kill previous timeout
         clearTimeout(inboxTimeout);
         var contactName = $(this).attr('id');
         $("#to").val(contactName);
         contact();
     });

});
  

Почему он просто добавляет больше функций тайм-аута, а не заменяет их при нажатии на новое имя контакта?

Сначала я бы посоветовал вам вместо использования replace каждый раз, вы могли бы легко использовать .html(data) для добавления новых данных в существующее содержимое тела чата.

И объяснение в том, что вы вызываете свою функцию при успешном выполнении ajax (есть время ожидания ответа сервера на ваш запрос), и если вы нажмете тем временем на другой вызов, у вас будет два вызова вместо одного, потому что вы не можете очистить таймер, который еще не запущен.

Ну, одним из решений было бы, пусть таймер работает только через его состояние по умолчанию, и когда вам нужны быстрые данные, вы можете позвонить своему контакту, не вызывая следующий таймер.

 $(document).ready(function(){ 
    var contactTimeout;
    var inboxTimeout;
   
   /* add parameter which will mean will we call timer or not */
   function contact(dotimer) {
       var fromName = $('#from').val();
       var toName = $("#to").val();
       $(".chat-title").replaceWith("<div class='chat-title'>"   toName   "</div>");
       $(".chat-form").fadeIn(100);

       $.ajax('chat/get-chat.php', {
          data: ({ to: toName,from: fromName}),
          type: "POST",
          success: function(data) {
              $(".chat-body").replaceWith("<div class='chat-body'>"   data   "</div>");
              /* default calling of timer with repeating */
              if (dotimer) { contactTimeout = setTimeout(function(){ contact(true); }, 2000); }
          } 
      }); 
   }

   function inbox() {
      var user = $('#from').val();
      $.ajax('chat/get-chat-inbox.php', {
          data: ({ user: user}),
          type: "POST",
          success: function(data) {
              $(".chat-body").replaceWith("<div class='chat-body'>"   data   "</div>");
              inboxTimeout = setTimeout(inbox, 2000);
           }
       }); 
     }


     // Load inbox when chat box is opened
     $(".chat-arrow").click(function(){
         clearTimeout(contactTimeout);
         inbox();
     });

     // Load chat from contact name
     $(".contact-name").click(function() {
         clearTimeout(inboxTimeout);
         var contactName = $(this).attr('id');
         $("#to").val(contactName);
         /* call function without TIMER, default one will work as it works */
         contact(false);
     });
});