Jak ustawić setInterval w stanie gotowym, zatrzymać się na fokusie textarea, a następnie rozpocząć skupienie na textarea?

Question

Mam strumień społecznościowy, który chcę zaktualizować za pomocą setInterval. SetInterval musi zostać zatrzymany, gdy ktoś zostawia komentarz lub odpowiedź, w przeciwnym razie usuwa zawartość textarea, ponieważ jest zagnieżdżona wewnątrz aktualizowanej treści.

Próbuję użyć tego kodu, zmodyfikowanego, z innej odpowiedzi, ale nie działa, ponieważ nie zatrzyma stopera po pierwszym cyklu timera setInterval.

HTML ...

<div id="social_stream_content"> 
    <textarea id="comments" rows="4" cols="50" placeholder="Set focus to stop timer"></textarea> 
</div> 

JS ...

function auto_load(){ 
       data = '<textarea id="comments" rows="4" cols="50" placeholder="Set focus to stop timer..."></textarea>'; 
     $("#social_stream_content").html(data); 
     alert("auto_load invoked"); 
} 

var myInterval; 
var interval_delay = 10000; 
var is_interval_running = false; //Optional 

$(document).ready(function(){ 
    auto_load(); //Call auto_load() function when document is Ready 

    //Refresh auto_load() function after 10000 milliseconds 
    myInterval = setInterval(interval_function, interval_delay); 

    $('textarea').focus(function() { 
     console.log('focus'); 
     clearInterval(myInterval); // Clearing interval on window blur 
     is_interval_running = false; //Optional 
    }).focusout(function() { 
     console.log('focusout'); 
     clearInterval(myInterval); // Clearing interval if for some reason it has not been cleared yet 
     if (!is_interval_running) //Optional 
      myInterval = setInterval(interval_function, interval_delay); 
    }); 
}); 

interval_function = function() { 
    is_interval_running = true; //Optional 
    // Code running while textarea is NOT in focus 
    auto_load(); 
} 

Edycja: I został uaktualniony kod na to wszystko jak testowany na JSfiddle. Licznik zatrzyma się, jeśli natychmiast ustawisz ostrość na polu tekstowym komentarza po zamknięciu alarmu w gotowości dokumentu.

Po usunięciu fokusu i zakończeniu pierwszego cyklu interwału czasomierz nie zatrzymuje się ponownie. Wydarzenie fokusowe wydaje się przestać strzelać.

Czy to dlatego, że obszar tekstowy komentarza jest zagnieżdżony w aktualizowanym obszarze zawartości? Wyciągam włosy. Jeśli usuniemy zagnieżdżenie, działa zgodnie z oczekiwaniami.

Moim zastrzeżeniem jest to, że tekst komentarza zawsze będzie zagnieżdżony w dziale zawartości strumienia społecznościowego, z oczywistych powodów.

Aby zaktualizować pytanie dalej: Czy istnieje sposób na zatrzymanie interwału, aby zatrzymać się na fokusie textarea przy użyciu jquery, podczas gdy skoncentrowany element jest zagnieżdżony w elemencie aktualizującym? Dlaczego zdarzenie fokusowe przestaje strzelać po zakończeniu pierwszego interwału?

Edytuj: Kompletny kod JS, działający w sposób poprawny, z włączonym rozwiązaniem Jeremy'ego Klukana, dla każdego, kto robi ten sam typ projektu.

JS PRACY:

function auto_load(){ 
    data = '<textarea id="comments" rows="4" cols="50" placeholder="Set focus to stop timer..."></textarea>'; 
    $("#social_stream_content").html(data); 
    alert("auto_load invoked"); 
} 

var myInterval; 
var interval_delay = 10000; 
var is_interval_running = false; //Optional 

$(document).ready(function(){ 
    auto_load(); //Call auto_load() function when document is Ready 

    //Refresh auto_load() function after 10000 milliseconds 
    myInterval = setInterval(interval_function, interval_delay); 

    $('body').on('focus', '#social_stream_content textarea', function (event) { 
     console.log('focus'); 
     clearInterval(myInterval); // Clearing interval on window blur 
     is_interval_running = false; //Optional 
    }).on('focusout', '#social_stream_content textarea', function(event) { 
     console.log('focusout'); 
     clearInterval(myInterval); // Clearing interval if for some reason it has not been cleared yet 
     if (!is_interval_running) //Optional 
      myInterval = setInterval(interval_function, interval_delay); 
    }); 
}); 

interval_function = function() { 
    is_interval_running = true; //Optional 
    // Code running while textarea is NOT in focus 
    auto_load(); 
} 

Answer 1

Fokus zdarzeń przestaje działać, ponieważ po uruchomieniu funkcji interwału zastępuje zawartość DIV, która go zawiera, dzięki czemu TEXTAREA już nie istnieje.

Czy to zamiast:

$('body').on('focus', '#social_stream_content textarea', function (event) { 
 
    // Focus handler 
 
}).on('focusout', '#social_stream_content textarea', function(event) { 
 
    // Focusout handler 
 
});

To wszystko uchwycić ostrość i focusOut wydarzeń, które pasują do wyboru "#social_stream_content textarea" bez bezpośredniego mocowania do obu obiektów.

Answer 2

Można wykryć ostrości i rozmycia na textarea wykorzystaniem addEventListener (wydarzenia: ustawianie ostrości i rozmycia).

Możesz zakończyć setInterval(), używając clearInterval(), przekazując intervalID.

Poniżej prosty przykład działania przedstawiający zleceniodawcę (w języku vanilla JavaScript).

Zasadniczo:

• Po uruchomieniu timera ładowania strony.
• Gdy użytkownik ustawi ostrość, zatrzyma się zegar textarea.
• Po rozmyciu użytkownika textarea odliczanie czasu rozpoczyna się ponownie.

Dokumentacja:

WindowTimers.clearInterval()

WindowTimers.setInterval()

Można również znaleźć interesujące Document.activeElement.

window.app = { 
 
    timerRef: null, 
 
    timerStart: function() { 
 
    this.timerRef = setInterval(function() { 
 
     //alert("Hello"); 
 
     console.log('refresh stream'); 
 
    }, 2000); 
 
    }, 
 
    timerStop:function(){ 
 
     clearInterval(this.timerRef); 
 
    }, 
 
    txtAreaListenFocus: function() { 
 
    var txtArea = document.getElementById('txtArea'); 
 
    txtArea.addEventListener('focus', function(event) { 
 
     this.timerStop(); 
 
     console.log('focus'); 
 
    }.bind(this)); 
 
    }, 
 
    txtAreaListenBlur: function() { 
 
    var txtArea = document.getElementById('txtArea'); 
 
    txtArea.addEventListener('blur', function(event) { 
 
     this.timerStart(); 
 
     console.log('blur'); 
 
    }.bind(this)); 
 
    }, 
 
    start: function() { 
 
    this.timerStart(); 
 
    this.txtAreaListenFocus(); 
 
    this.txtAreaListenBlur(); 
 
    } 
 

 
}; 
 

 
window.app.start();

<textarea id="txtArea" rows="4" cols="50"> 
 
    Some content here 
 
</textarea>

---

wersja jQuery poniżej. Można użyć .focusout() i .focusin():

$(document).ready(function(){ 
 
window.app = { 
 
    timerRef: null, 
 
    timerStart: function() { 
 
    this.timerRef = setInterval(function() { 
 
     //alert("Hello"); 
 
     console.log('refresh stream'); 
 
    }, 2000); 
 
    }, 
 
    timerStop:function(){ 
 
     clearInterval(this.timerRef); 
 
    }, 
 
    txtAreaListenFocus: function() { 
 
    $('#txtArea').focusin(function(event) { 
 
     this.timerStop(); 
 
     console.log('focus'); 
 
    }.bind(this)); 
 
    }, 
 
    txtAreaListenBlur: function() { 
 
    $('#txtArea').focusout(function(event) { 
 
     this.timerStart(); 
 
     console.log('blur'); 
 
    }.bind(this)); 
 
    }, 
 
    start: function() { 
 
    this.timerStart(); 
 
    this.txtAreaListenFocus(); 
 
    this.txtAreaListenBlur(); 
 
    } 
 

 
}; 
 

 
window.app.start(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<textarea id="txtArea" rows="4" cols="50"> 
 
    Some content here 
 
</textarea>

---

chodzi konkretnie kodu w pytaniu, mam go naprawić w przykładzie roboczym poniżej.

$(document).ready(function() { 
 
    var myInterval; 
 
    var interval_delay = 1000; 
 
    var is_interval_running = false; //Optional 
 
    var interval_function = function() { 
 
is_interval_running = true; //Optional 
 
console.log('refresh stream'); 
 
// Code running while comment textarea is not in focus 
 
//auto_load(); 
 
    }; 
 

 
    //auto_load(); //Call auto_load() function when DOM is Ready 
 

 
    //Refresh auto_load() function after 1000 milliseconds 
 
    myInterval = setInterval(interval_function, interval_delay); 
 

 
    $('#textarea').focus(function() { 
 
clearInterval(myInterval); // Clearing interval on window blur 
 
is_interval_running = false; //Optional 
 
    }).focusout(function() { 
 
clearInterval(myInterval); // Clearing interval if for some reason it has not been cleared yet 
 
if (!is_interval_running) //Optional 
 
    myInterval = setInterval(interval_function, interval_delay); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<textarea id="textarea" rows="4" cols="50"> 
 
    Some content here 
 
</textarea>

Answer 3

Mój dylemat: D

HTML:

<div id="social_stream_content"></div> 

jQuery:

var myInterval; 
var interval_delay = 1000; 
var is_interval_running = false; //Optional 

$(document).ready(function(){ 
    data = '<textarea id="comments" rows="4" cols="50" placeholder="Set focus to stop timer..."></textarea>'; 
    $(data).appendTo("#social_stream_content"); 

    //Refresh auto_load() function after 10000 milliseconds 
    var myInterval = setInterval(interval_function, interval_delay); 

    $('#comments').focus(function() { 
     console.log('focus'); 
     clearInterval(myInterval); // Clearing interval on window blur 
     is_interval_running = false; //Optional 
    }).focusout(function() { 
     console.log('focusout'); 
     clearInterval(myInterval); // Clearing interval if for some reason it has not been cleared yet 
     if (!is_interval_running) //Optional 
      myInterval = setInterval(interval_function, interval_delay); 
    }); 
}); 

interval_function = function() { 
    is_interval_running = true; //Optional 
    // Code running while textarea is NOT in focus 
    $("#comments").val(""); 
    console.log("loop"); 
} 

Nadzieję, że to pomaga.