Narzędzie do szkolenia psów słyszących - setTimeout ()

• Kwiecień 26, 2024

W poprzednim artykule zacząłem iteracyjne opracowywanie małego programu JavaScript, który pomaga w szkoleniu psa w zakresie ostrzeżeń dźwiękowych. Do tej pory program, który można wyświetlić tutaj, zawiera ustawiony przycisk alarmu, który po naciśnięciu wyskakuje alert informujący, że alarm się wyłączył (chociaż alarm dźwiękowy nie jest jeszcze skonfigurowany). W następnym kroku zamierzają ustawić czas oczekiwania między naciśnięciem przycisku „ustaw budzik” a budzikiem, takim jak jest, uruchamianiem się.

JavaScript i Document Object Model (DOM) mają kilka programów obsługi zdarzeń, które czekają, aż coś się wydarzy (tj. na kliknięcie, onMouseOver, ...); jednak w tym przypadku chcemy poczekać, aż minie trochę czasu, DOM również zapewnia taką metodę setTimeout (). setTimeout () wymaga uruchomienia dwóch argumentów, kodu lub funkcji oraz czasu oczekiwania w milisekundach przed uruchomieniem. set_timeout () może również wziąć opcjonalną trzecią opcję oznaczającą używany język skryptowy - JavaScript, JScript lub VBScript (pamiętaj, że jest to część DOM, a nie JavaScript).

Nasz nowy kod wygląda następująco:


funkcja do_alarm () {
// określ czas oczekiwania w sekundach
wait_secs = 52; // na razie, po prostu to zdefiniuj
// poczekaj, aż minie czas i uruchom alarm
setTimeout (sound_alarm (), (wait_secs * 1000))
}


Działa to świetnie, ale trudno powiedzieć, ponieważ nic nie zmienia się po naciśnięciu przycisku, dopóki czas się nie skończy. Jednak DOM może nam również w tym pomóc. Dodałem następujące 2 linie na początku do_alarm () funkcjonować:


// oznacz alarm jako ustawiony
document.getElementById („przycisk_alarmu”). disabled = true
document.getElementById („przycisk_alarmu”). value = „Alarm Set”


Zmienia to przycisk, który nacisnęliśmy, aby ustawić alarm na „Alarm Set” i wyłącza go. Jeśli chcemy ponownie móc korzystać z alarmu, będziemy musieli zmienić przycisk z powrotem do stanu pierwotnego. Dodałem to do funkcji sound_alarm (). Możesz wyświetlić cały kod i wypróbować działający przykład tutaj.