Использование requestAnimationFrame для запуска и остановки функции, выполняющей three.js внутри Barba.js? - PullRequest
Новая
       12

Использование requestAnimationFrame для запуска и остановки функции, выполняющей three.js внутри Barba.js?

0 голосов
/ 25 октября 2018

На моей домашней странице запущен three.js, и я использую barba.js, чтобы использовать ajax для более плавного перехода между страницами.Проблема в том, что после того, как я несколько раз возвращался с домашней страницы и возвращался к ней, мой сайт начал работать очень медленно.Я пытаюсь найти способ обойти это, и я подумал, что у меня есть один, использующий barba.js Views и requestAnimationFrame, однако я не думаю, что это помогло достаточно.У кого-нибудь есть лучшее представление о том, как уничтожить или прекратить выполнение моей функции three.js?

barbaMain.js 

document.addEventListener("DOMContentLoaded", function () {
  var lastElementClicked;
  let animationLoop = null

  const SingleNews = Barba.BaseView.extend({
    namespace: 'single-news',
    onEnterCompleted: function () {
        animationLoop = requestAnimationFrame( doThree )
    },

    onLeave: function() {
      cancelAnimationFrame(animationLoop)
    },

  });

  SingleNews.init()

Barba.Pjax.start();






  Barba.Dispatcher.on('linkClicked', function(el) {
    lastElementClicked = el;
  });
  var FadeTransition = Barba.BaseTransition.extend({
    start: function() {

      Promise
        .all([this.newContainerLoading, this.fadeOut()])
        .then(this.fadeIn.bind(this));
    },

    fadeOut: function() {

      return $(this.oldContainer).animate({
          opacity: 0
        }, 400, function() {} ).promise()
    },

    fadeIn: function() {

      var _this = this;
      var $el = $(this.newContainer);

      $(this.oldContainer).hide();

      $el.css({
        visibility: 'visible',
        opacity: 0
      });

      $el.animate({
        opacity: 1
      }, 400, function() {

        _this.done();

      });
    }
  });


  Barba.Pjax.getTransition = function() {

      return FadeTransition;
  };
})

HTML 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Jacob Truax Portfolio</title>
  <link rel="stylesheet" href="normalize.css">
  <link rel="stylesheet" href="canvas-fix">
  <link rel="stylesheet" href="style.css">

  <link href="https://fonts.googleapis.com/css?family=IBM+Plex+Mono" rel="stylesheet">
  <script src="three.min.js"></script>
  <script src="portfolio.js"></script>
  <script src="jquery-3.3.1.min.js"></script>
  <script src="barba.js"></script>
  <script src="barbaMain.js"></script>

</head>

<body>

<div id="barba-wrapper">
  <div class="barba-container" data-namespace="single-news">
  <header>
  <a class="home" href="#">Jacob Truax</a>
  <a class="contact" href="info.html">Info</a>
  <a class="info" href="#">Work</a>
  </header>

<section class="three"></section>
</div>
</div>
</body>

Функции Three.js находятся внутри этого: 

const doThree = function () {}
...