Наложение jQuery .fadeIn () (после просмотра другой вкладки браузера)

Question

Наложение jQuery .fadeIn () (после просмотра другой вкладки браузера)

0

Я написал сценарий для отображения чисел на фоне, которые исчезают и исчезают. (какая-то матричная тема)

все работает нормально, пока я не покину страницу, чтобы увидеть любую другую вкладку браузера. Когда я вернусь к вкладке с моим скриптом, числа (которые исчезают и исчезают) накладываются/перекрываются. Насколько я понимаю, setInterval() начинает сбивать мои временные интервалы функции functionGhost() в течение периода времени, когда эта вкладка неактивна.

Есть ли способ синхронизировать функцию setInterval() и codeGhost(), чтобы не иметь этих проблем, если пользователь возвращается с другой вкладки браузера обратно на страницу с моим скриптом?

С наилучшими пожеланиями.

var codeElement = 1;
function randomIntNum(){
    codeElement = Math.floor(Math.random()*10);
}
function getRandomInt(min, max){
  return Math.floor(Math.random() * (max - min + 1)) + min;
}
$(document).ready(function(){
    function codeGhost(){ 
     $("#codeGhost").css({
        'top' : getRandomInt(0,400),
        'left': getRandomInt(0,900)
    });
        randomIntNum();
        $('#codeGhost').html(codeElement);
        $('#codeGhost').fadeIn( 2000, function(){ $('#codeGhost').fadeOut( 2000) });
    }
    setInterval(codeGhost, 4000);
})

A1exandr 24 сен. 2013, в 13:34

Источник

Теги:

javascript

jquery

1 ответ

Ещё вопросы

Henry Gibson · Accepted Answer · 2013-09-24T09-45-00.000Z

Ну, вам не нужно объявлять свою функцию codeGhost() внутри вашего обработчика документа - только ваш setInterval - чтобы вы могли перемещать это вне функции, это, вероятно, хорошая практика.

Ваша скрипка, похоже, работает нормально, но, возможно, вы столкнетесь с несколькими тайм-аутами. я бы поменял

setInterval(codeGhost, 4000);

для

setTimeout(codeGhost, 4000);

а затем вызывать следующий тайм-аут из вашей функции codeGhost() каждый раз, когда он запускается:

function codeGhost(){ 
    $("#codeGhost").css({
        'top' : getRandomInt(0,400),
        'left': getRandomInt(0,900)
    });
    randomIntNum();
    $('#codeGhost').html(codeElement);
    $('#codeGhost').fadeIn(2000, function(){ 
        $('#codeGhost').fadeOut(2000, function() {
            setTimeout(codeGhost, 4000);
        });
    });    
}

не повезло. Я заставил его работать быстрее, и теперь вы определенно можете видеть, как он работает. jsfiddle.net/A1ex5andr/9MFyz/3
Любые другие идеи, как можно синхронизировать .fadeIn () и setTimeout ()?
Извините - я не осознавал, что затухания были в то же время, что и вы. Вы можете использовать функцию обратного вызова для каждого из этих затуханий, поэтому вызывайте тайм-аут после того, как все будет завершено - тогда ничто не должно запускаться до тех пор, пока оно не будет завершено и не будет совпадений. $('#codeGhost').fadeIn(2000, function(){ $('#codeGhost').fadeOut(2000, function () { setTimeout(codeGhost, 4000); }) })
ОЙ! Теперь это выглядит так очевидно, чистая логика)) Спасибо. Определенно я искал решение в неверном направлении))
нет проблем, часто это простой ответ, который вы просто не можете увидеть - упустить голос :)
Нужно больше репутации, чтобы проголосовать, сделаю это, когда это возможно.