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

Question

[Анастасия]

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

<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>

Answer 1

[alexhovansky]

Передавайте callback в setTimeout

Answer 2

[Сергей Соколов]

Стоит отрефакторить код, чтобы не повторялись одинаковый функционал и одинаковые текстовые строки

Примерно так

Здесь ваш код без изменений логики, одинаковый функционал вынесен в пять вспомогательных функций 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));