jQuery - неактивная вкладка перемещения текста

Question

У меня есть код, который меняет заголовок страницы, когда вкладка неактивна:

  <script>
jQuery(document).ready(function( $ ){
  // Get page title
    var pageTitle = $("title").text();

// Change page title on blur
  $(window).blur(function() {
      $("title").text("Hej! Wracaj do nauki! &#128578");
    });

// Change page title back on focus
    $(window).focus(function() {
      $("title").text(pageTitle);
    });
});
</script>

Работает нормально, но не показывает весь список неактивных вкладок. Как я могу заставить этот .text перемещаться, чтобы показать пользователю весь заголовок?

Answer 1

• Кэшируйте свои элементы const $title = $('title'); не запрашивайте DOM через интервалы!
• Используйте рекурсивный setTimeout для размытия окна
• Используйте Emoji Unicode напрямую как ? (не как представление 🙂)
• Разделить текст мода в виде массива и поиграть с массивом в окне "blur" в течение времени ожидания
• Вкл. "focus" clearTimeout и восстановить исходное название:

jQuery(function($) {

  const $title = $("el-title"); // DEMO ONLY! Use $("title") instead
  const txt = $title.text();
  const arr = [..."Hej! Wracaj do nauki! ? "];
  let tOut = null;
  
  const play = () => {
    $title.text(arr.join(''));
    arr.push(arr.shift());
    tOut = setTimeout(play, 200);
  }
  
  const stop = () => {
    $title.text(txt);
    clearTimeout(tOut);
  }

  $(window).on({
    blur: play,
    focus: stop,
  });

});

<el-title>Click and Blur to start animation</el-title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

Answer 2

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

   var blurPageTitle = ''; // Variable to save the page title. Otherwise it removes the spaces from the title.
   changeTitle = function(){
    var letter = blurPageTitle.charAt(0);
    blurPageTitle = blurPageTitle.substr(1) + letter; 
    document.title = blurPageTitle;
    changeTitleTimer = setTimeout(changeTitle, 500);
   };

Просто вызовите функцию, когда вы хотите ее запустить. Чтобы двигаться быстрее, уменьшите время в функции setTimeout, чтобы двигаться медленнее, увеличьте его.

    stopChangingTitle = function(){
        clearTimeout(changeTitleTimer);
    }

Чтобы отменить перемещение, просто вызовите эту функцию, и она остановится.

Если вам нужно ее реализовать в вашем коде это будет выглядеть так:

 <script>
jQuery(document).ready(function( $ ){
  // Get page title
    var pageTitle = $("title").text();
    var blurPageTitle = ''; // Variable to save the web title.
// Change page title on blur
  $(window).blur(function() {
      $("title").text("Hej! Wracaj do nauki! &#128578");
      blurPageTitle = document.title+' '; // Update title with the default title * Space required in the end not to mix the first with last word.
      changeTitle(); // Start moving the title
    });

// Change page title back on focus
    $(window).focus(function() {
      $("title").text(pageTitle);
      stopChangingTitle(); // Stop moving the title
    });


    changeTitle = function(){
        var letter = blurPageTitle.charAt(0);
        blurPageTitle = blurPageTitle.substr(1) + letter; 
        document.title = blurPageTitle;
        changeTitleTimer = setTimeout(changeTitle, 500);
    };

    stopChangingTitle = function(){
        clearTimeout(changeTitleTimer);
    }
});
</script>