Уменьшить window.setInterval после нажатия

Question

У меня есть этот кусок jQuery. Некоторые фразы показаны случайным образом.
Фразы показаны с интервалом:

window.setInterval(getMessage, 350);

Я хочу уменьшить значение 350 до 1 в течение 10 секунд после нажатия на кнопку body.

У меня есть этот код. Как я могу получить 350 до 1 после нажатия на body?

Спасибо!

$(document).ready(function () {
  // Elements to loop through
  var elem = $('.message');
  // Start at 0
  z = 0;
  function getMessage() {
    // Loop through elements
    $(elem).each(function (index) {
      if (z == index) {
        // Show active element
        $(this).show();
      } else if (z == $(elem).length) {
        // Show message
        $(this).show();
        // Reset i lst number is reached
        z = 0;
      } else {
        // Hide all non active elements
        $(this).hide();
      }
    });
    z++;
  }
  // Run once the first time
  getMessage();
  // Repeat
  window.setInterval(getMessage, 350);
});
$('body').click(function () {
  $('body').addClass('run');
});

Answer 1

Я хочу уменьшить значение '350' до '1' в течение периода из 10 секунд после щелчка по телу.

Как интервал "будет постепенно меняться, вы не можете использовать setInterval. Вместо этого используйте setTimeout с переменной.

var out = 1; // something to output
var interval = 350;

function output() {
  $("#output").text( (++out) + " : " + interval);
  setTimeout(output, interval);
}

function reduce() {
  $("#output").text( (++out) + " : " + interval);
  if (interval < 10) {
    $("#output").removeClass("reducing");
    return;
  }
  // every 1/10 second reduce by 3.5, giving 350 in 10 seconds
  interval -= 3.5;
  setTimeout(reduce, 100);
}

setTimeout(output, interval);

$(document).one("click", function() {

  // reduce interval gradually
  // how gradually can be tweaked


  $("#output").addClass("reducing");
  reduce();
});

#output {
  border: 1px solid green;
}

#output.reducing {
  border: 1px solid red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='output'></div>