обновить переменную в одной функции и использовать обновленную переменную в разных функциях с помощью setTimeout

Я уверен, что это будет действительно очевидно для более опытных, но мне действительно нужна помощь с этим. Я пытаюсь увеличить время в setTimeout в зависимости от того, как долго пользователь мог переходить на вкладку, но функция с таймаутом не видит обновленную переменную max - может ли кто-нибудь помочь мне выяснить, что не так с моим кодом? (Я пропустил настраиваемый fn отслеживания, потому что он не актуален и может быть воспринят как просто дополнительный console.logs)

больше контекста: по сути, я измеряю, как долго пользователь видит элемент marquee/page и регистрирует информацию в customTracking fn через 15 секунд (будет больше в реальном рабочем коде). Мне больше не важно, что делает пользователь, и я получаю окончательную информацию. я пытаюсь приостановить тайм-аут на время еды на вынос / минимизировать / видимость

      var options = {
        root: null,
        rootMargin: '0px',
        threshold: [.5]
      }
      
      var startTime, leftTime, elapsedTime;
      var capTimestamp, timeCap; // the timeout
      var navedAwayAt;
      var max, gonefor;
      
      var callback = (entries, observer) => {
        entries.forEach(entry => {
          if (entry.isIntersecting) {
              startTime = entry.time; // in viewport when
              entry.target.dataset.viewStartedAt = startTime; // capture in data attribute
              if(entry.target.dataset.viewEndedAt) { entry.target.dataset.viewEndedAt = 'waiting'; }
              if(entry.target.dataset.totalViewTime) { entry.target.dataset.totalViewTime = 'waiting'; }
              window.addEventListener('beforeunload', handlePageUnload); // navigation
              document.addEventListener("visibilitychange", handleVisibilityChange, false); // tab
              capAndUnobserve(); // stop tracking after max time
              trackCustomLink('ENTERED marquee'); // fire
              console.log(entry.target); // log el
          } else if (!entry.isIntersecting) {
            max = 15000; //reset max if user tabbed away and then scrolled away
            clearTimeout(timeCap); // stop the timeout on scroll away before time reached
            window.removeEventListener("beforeunload", handlePageUnload); // no longer action nav
            document.removeEventListener("visibilitychange", handleVisibilityChange, false); // no longer action tab away / minimise
            leftTime = entry.time; // capture when they left
            if (startTime) { // if they were ever there
              elapsedTime = (parseInt(leftTime) - parseInt(startTime)); // duration
            }
            if (elapsedTime) {
              customTracking('LEFT marquee');
              customTracking('marquee SEEN FOR ' + elapsedTime/1000 + ' seconds');
              entry.target.dataset.viewEndedAt = leftTime; // when they left in data attribute
              target.dataset.totalViewTime = elapsedTime; // duration in data attribute
              console.log(entry.target); // have a gander at the element attribs now
            }
          }
        });
      };
      
      var observer = new IntersectionObserver(callback, options); // constructor
      var target = document.querySelector('[id*=_xxxx_]'); // set target
      observer.observe(target); // observe
      
      var tabbedAwayAt;
      var cameBackAt;
      var gonefor;
      var unloading = false;
      var seg_1; var seg_2;

      function handleVisibilityChange() {
        if (!target.dataset.isOberving && !unloading) {
          if (document.hidden) {
            waseverhidden = true;
            gonefor = 0;
            max = 15000;
            tabbedAwayAt = performance.now();
            console.log('tabbedAwayAt ' + tabbedAwayAt);
            seg_1 = tabbedAwayAt - startTime;
            console.log('seenfor_1 ' + seg_1/1000);
          } else {
            cameBackAt = performance.now();
            console.log('cameBackAt ' + cameBackAt);
            gonefor = (cameBackAt - tabbedAwayAt);
            console.log('gonefor ' + gonefor/1000);
            console.log('original start time ' + startTime/1000);
            startTime = startTime + gonefor;
            max = 15000 + gonefor;
            console.log('new max ' + max);
            console.log('start time plus gone for ' + startTime/1000);
            target.dataset.viewStartedAt = startTime;
          }
          return max
        }
      }
      
      function capAndUnobserve() {
        timeCap = setTimeout((max) => {
            console.log(max);
            clearTimeout(timeCap);
            capTimestamp = performance.now();
            alert('time cap happend at ' + capTimestamp);
            customTracking('user has seen marquee for (at least) [max time] - !!end tracking!! ' + startTime + ' | ' + capTimestamp);
            console.log(capTimestamp + ' ' + (capTimestamp - startTime)/1000); //should not be less than max e.g 15 seconds
            observer.unobserve(target);
            target.dataset.isOberving = 'false';
            target.dataset.viewEndedAt = 'capTimestamp';
            target.dataset.totalViewTime = capTimestamp - startTime;
          }, max ? max : 15000);
          console.log('max ' + max);
      };
      
      function handlePageUnload(e) {
        if (!target.dataset.isOberving) {
          unloading = true;
          navedAwayAt = performance.now();
          console.log(e);
          elapsedTime = (navedAwayAt - startTime)/1000;
          console.log(navedAwayAt);
          console.log("1: beforeunload,", document.hidden);
          customTracking('Navigated away while in marquee, time spent in marquee was ' + elapsedTime + ' seconds');
          clearTimeout(timeCap); // stop the timeout on scroll away before time reached
          window.removeEventListener("beforeunload", handlePageUnload); // no longer action nav
          document.removeEventListener("visibilitychange", handleVisibilityChange, false); // no longer action tab away / minimise
        }
      }```

0 ответов

Другие вопросы по тегам