обновить переменную в одной функции и использовать обновленную переменную в разных функциях с помощью 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
}
}```