Задать вопрос
@patsooo
javascript

Как запустить функцию после окончания другой функции?

У меня есть вот такая функция

<script>
$('#two_categor_mess').click(function () {
var feedback = 'hello';
$('.message-screen').append('<div class="user_two_message col-xs-12 col-sm-12"><div class="sender-text"><p>Please tell us about PatShop and PatStudio</p></div></div>');   
$('.delivered').addClass('old');
        $('.patshop_bot').addClass('old');
        $('.message-screen').append('<div class="delivered"><span>Delivered</span></div>');
   setTimeout(function() { 
   {
        setTimeout(function() {
            $('.message-screen').append('<div class="user_two_message col-xs-12 col-sm-12"><div class="received-text"><p>'+feedback+'</p></div></div>');
            $('.typing_block').hide();
  },1000)
        $('.delivered').addClass('old');
        $('.message-screen').append('<div class="delivered"><span>Read</span></div>');
        $('.message-screen').append('<div class="user_two_message col-xs-12 col-sm-12"><div class="typing_block"></div></div>');
    }
   }, 500);  
  });  
</script>


Она должна выполняться, если в этой функции выполняется условие else

$('#send').on('click', function () {
    setTimeout(function() { 
     var divValue = $('.sender-text').last().text();
    var test = 'hello';
    var feedback = 'hello ';
    var feedbackhowareyou = 'good ';
    var feedbackalret = ' Im sorry  Im in development and dont understand some of the messages.  Here are the questions I can help you with: ';
    var selectcategories = '<div class="swiper-container"><div class="swiper-wrapper"><div class="swiper-slide" id="first_categor_mess"><p>What is PatShop and PatStudio?</p></div><div class="swiper-slide" id="two_categor_mess"><p>How to add your project</p></div><div class="swiper-slide" id="last_categor_mess"><p>How to buy the project</p></div></div></div>';
    var selectcategoriestext = 'Choose one of the categories';
    

    if (divValue.indexOf(test) >= 0)
    {
        setTimeout(function() {
            $('.message-screen').append('<div class="user_two_message col-xs-12 col-sm-12"><div class="received-text"><p>'+feedback+'</p></div></div>');
            $('.typing_block').hide();
  },1000)
        $('.delivered').addClass('old');
        $('.message-screen').append('<div class="delivered"><span>Read</span></div>');
        $('.message-screen').append('<div class="user_two_message col-xs-12 col-sm-12"><div class="typing_block"></div></div>');
    }
        
    else {
        setTimeout(function() {
            $('.message-screen').append('<div class="user_two_message col-xs-12 col-sm-12"><div class="received-text"><p>'+feedbackalret+'</p></div></div>');
//            $('.message-screen').append('<div class="user_two_message col-xs-12 col-sm-12"><div class="received-text"><p>'+feedbackalrettwo+'</p></div></div>');
            $('.message-screen').append('<div class="user_two_message col-xs-12 col-sm-12">'+selectcategories+'</div>');
            $('.message-screen').append('<div class="user_two_message col-xs-12 col-sm-12"><div class="received-text"><p>'+selectcategoriestext+'</p></div></div>');
            $('.typing_block').hide();
  },1200)
        $('.delivered').addClass('old');
        $('.message-screen').append('<div class="delivered"><span>Read</span></div>');
        $('.message-screen').append('<div class="user_two_message col-xs-12 col-sm-12"><div class="typing_block"></div></div>');
};
        }, 500);
  });  
</script>
  • Вопрос задан
  • 170 просмотров
Комментировать
Подписаться 1 Простой Комментировать
Пригласить эксперта
Ответы на вопрос 2
@alexhovansky
Передавайте callback в setTimeout
Ответ написан
Комментировать
Комментировать
sergiks
@sergiks Куратор тега JavaScript
♬♬
Стоит отрефакторить код, чтобы не повторялись одинаковый функционал и одинаковые текстовые строки
Примерно так
Здесь ваш код без изменений логики, одинаковый функционал вынесен в пять вспомогательных функций Helper functions:
$('#two_categor_mess').click( function() {
  var feedback = 'hello';
  addMessage(userTwoMsg('<div class="sender-text"><p>Please tell us about PatShop and PatStudio</p></div>'));
  $('.delivered').addClass('old');
  $('.patshop_bot').addClass('old');
  addDelivered('Delivered');
  setTimeout(function() { 
    setTimeout(function() {
      addReceived(feedback);
      $('.typing_block').hide();
    }, 1000);

    $('.delivered').addClass('old');
    addDelivered('Read');
    addTypingBlock();
  }, 500);
});


// Helper functions
const addMessage = content => $('.message-screen').append(content);
const userTwoMsg = content => '<div class="user_two_message col-xs-12 col-sm-12">' + content + '</div>';
const addTypingBlock = () => addMessage(userTwoMsg('<div class="typing_block"></div>'));
const addDelivered = status => addMessage('<div class="delivered"><span>' + status + '</span></div>');
const addReceived = text => addMessage(userTwoMsg('<div class="received-text"><p>'+text+'</p></div>'));


function onSendClickDelayed() { 
  var divValue = $('.sender-text').last().text();
  var test = 'hello';
  var feedback = 'hello ';
  var feedbackhowareyou = 'good ';
  var feedbackalret = ' Im sorry  Im in development and dont understand some of the messages.  Here are the questions I can help you with: ';
  var selectcategories = '<div class="swiper-container"><div class="swiper-wrapper"><div class="swiper-slide" id="first_categor_mess"><p>What is PatShop and PatStudio?</p></div><div class="swiper-slide" id="two_categor_mess"><p>How to add your project</p></div><div class="swiper-slide" id="last_categor_mess"><p>How to buy the project</p></div></div></div>';
  var selectcategoriestext = 'Choose one of the categories';
  

  if (divValue.indexOf(test) >= 0) {
    setTimeout(function() {
      addReceived(feedback);
      $('.typing_block').hide();
    }, 1000);
  
    $('.delivered').addClass('old');
    addDelivered('Read');
    addTypingBlock();

  } else {

    setTimeout(function() {
      addReceived(feedbackalret);
//                  addReceived(feedbackalrettwo);
      addMessage(userTwoMsg(selectcategories));
      addReceived(selectcategoriestext);
      $('.typing_block').hide();
    }, 1200)

    $('.delivered').addClass('old');
    addDelivered('Read');
    addTypingBlock();

  }
}

$('#send').on('click', () => setTimeout(onSendClickDelayed, 500));


Теперь к вашему вопросу. Если вытащить «вот такую» функцию и дать ей имя, её можно будет вызывать из нескольких разных мест:
тот же код с небольшими изменениями
const onClickTwo = () => {
  var feedback = 'hello';
  addMessage(userTwoMsg('<div class="sender-text"><p>Please tell us about PatShop and PatStudio</p></div>'));
  $('.delivered').addClass('old');
  $('.patshop_bot').addClass('old');
  addDelivered('Delivered');

  setTimeout(function() { 

    setTimeout(function() {
      addReceived(feedback);
      $('.typing_block').hide();
    }, 1000);

    $('.delivered').addClass('old');
    addDelivered('Read');
    addTypingBlock();
  }, 500);
}

$('#two_categor_mess').click(onClickTwo);


// Helper functions
const addMessage = content => $('.message-screen').append(content);
const userTwoMsg = content => '<div class="user_two_message col-xs-12 col-sm-12">' + content + '</div>';
const addTypingBlock = () => addMessage(userTwoMsg('<div class="typing_block"></div>'));
const addDelivered = status => addMessage('<div class="delivered"><span>' + status + '</span></div>');
const addReceived = text => addMessage(userTwoMsg('<div class="received-text"><p>'+text+'</p></div>'));


function onSendClickDelayed() { 
  var divValue = $('.sender-text').last().text();
  var test = 'hello';
  var feedback = 'hello ';
  var feedbackhowareyou = 'good ';
  var feedbackalret = ' Im sorry  Im in development and dont understand some of the messages.  Here are the questions I can help you with: ';
  var selectcategories = '<div class="swiper-container"><div class="swiper-wrapper"><div class="swiper-slide" id="first_categor_mess"><p>What is PatShop and PatStudio?</p></div><div class="swiper-slide" id="two_categor_mess"><p>How to add your project</p></div><div class="swiper-slide" id="last_categor_mess"><p>How to buy the project</p></div></div></div>';
  var selectcategoriestext = 'Choose one of the categories';
  

  if (divValue.indexOf(test) >= 0) {
    setTimeout(function() {
      addReceived(feedback);
      $('.typing_block').hide();
    }, 1000);
  
    $('.delivered').addClass('old');
    addDelivered('Read');
    addTypingBlock();

  } else {

    setTimeout(function() {
      addReceived(feedbackalret);
//                  addReceived(feedbackalrettwo);
      addMessage(userTwoMsg(selectcategories));
      addReceived(selectcategoriestext);
      $('.typing_block').hide();
    }, 1200)

    $('.delivered').addClass('old');
    addDelivered('Read');
    addTypingBlock();
    
    onClickTwo(); // добавили вызов ТОЙ функции

  }
}

$('#send').on('click', () => setTimeout(onSendClickDelayed, 500));
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Junior JavaScript Developer
КРАФТТЕК • Санкт-Петербург
от 60 000 до 80 000 ₽
JavaScript разработчик
вАйТи
от 5 000 до 25 000 ₽
JavaScript Fullstack
OnClass
от 200 000 до 600 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Выполнить декомпозицию задания по разработке веб-сервиса
16 апр. 2024, в 15:19
2500 руб./за проект
Необходимо исправить баги на сайте
16 апр. 2024, в 15:12
2000 руб./за проект
Разработать графическую часть плагина для SonarQube
16 апр. 2024, в 14:51
1500 руб./за проект
Ещё заказы