Czy w javascript jest jakiś prosty mechanizm synchronizacji, tudzież sposób, żeby uzyskać taki efekt.

Klasyczna sytuacja. Dwie funkcje, obie operują na tych samych zasobach. Jedna jest cykliczna np co 5 s. Trwa około 1s. Druga związana z eventem. Funkcja pierwsza ma w swojej treści czekanie setTimeout. Jeśli kliknę w trakcie czekania niestety nie uzyskam żądanego efektu ponieważ na jednym zasobie pracują dwie funkcje.

Rozwiązaniem byłoby synchronizacja między nimi w ten sposób, że druga funkcja czeka na zakończenie pierwszej i wtedy się wykonuje, natomiast kolejne wywołanie funkcji pierwszej nastąpi dopiero po wykonaniu funkcji drugiej.

JS jest w pełni jednowątkowy (pomijając Web workery), stąd brak w tym języku jakichkolwiek mechanizmów synchronizacji. Jednak konieczność zsynchronizowania kilku różnych timeoutów wydaje się dosyć podejrzana - mógłbyś opisać swój problem i napisać dlaczego właśnie tak chcesz go rozwiązać? Wygląda na to, że mamy tutaj do czynienia z problemem XY.

Co do samego tematu - prawdopodobnie najłatwiej byłoby utworzyć jakąś kolejkę, gdzie co 5 sekund dodawałbyś pierwszą funkcję, a przy kliknięciu drugą. Samo wykonywanie funkcji z tej kolejki leżałoby w gestii innego obiektu, który mógłby wstrzymywać jej działanie do czasu zakończenia aktualnie przetwarzanej funkcji (łącznie z timeoutami wygenerowanymi w niej).

No niby jednowątkowy, ale jakoś funkcje nie czekają na siebie aż jedna się skończy i zacznie druga. Np. jak mam animację w jQuery i instrukcję za to odpowiadającą. To następna instrukcja zaczyna się wykonywać zanim skończy się animacja...

edit:

może to problem XY, ale już tak daleko w to zabrnąłem... Nie będę przedstawiał problemu, bo jest rozbudowany, a wiem, jak się czyta cudzy kod.

Jak jest chociaż w miarę dobrze napisany to się czyta normalnie.
Jeżeli nam nie podasz żadnych istotnych informacji ciężko nam odpowiedzieć na cokolwiek.

Ok, ostrzegam, że to może być szok, bo to mój pierwszy skrypt w js. Także optymalizacyjnie to może być skandal, ale działa to dopóki nie trzeba zmienić slajdu klikając.

Oto slideshow mojego autorstwa:

[PHP] pobierz, plaintext 
var tytul = new Array('Nazwa Artykułu','Nazwa drugiego artykułu','Niebieski','Różowy');
 
var opis = new Array('podpis pod artykułem','podpis pod drugim artykułem','Lubię ten kolor', 'a tego nie');
// Dwie tablice, które będą przechowywały krótkie łańcuchy
 
 
 
function slideSwitchNormal() {
//ta funkcja działa jak złoto
 
			var nazwa= $(".aa").attr("src");
// mam dwa obrazki na sobie klasy aa i klasy bb będę zmieniał ich przejrzystość i ich źródło src by uzyskać efekt slideshow
 
			var liczba = parseInt(nazwa.charAt(8));
// obrazki w folderze mają nazwy 1.jpg, 2.jpg, 3.jpg aby stronę można było generować dynamicznie
 
			if(liczba<4)
 
				nazwa = "grafika/" + (++liczba).toString() + ".jpg";
//siedzą w folderze grafika
			else 	{nazwa = "grafika/1.jpg"; liczba= 1;}
 
			$(".aa").fadeOut("slow");
 
			$("p.tytul2").fadeOut("slow");
 
			$("p.podpis2").fadeOut("slow");
// mój slideshow to prostokąt na którym oprócz obrazków zmieniają się podpisy
			var a = "#but" + liczba;			
 
			$(a).attr("class", "butC");
 
			if ( liczba == 1)a = "#but" + 4; 
 
			else a = "#but" + (liczba - 1);
// a to buttony, których podświetlenie zmienia się w zależności od tego który slajd jest wyświetlany
			$(a).attr("class", "but");
 
			setTimeout(function() {
// opóźnienie z powodu, który wymieniłem w poprzednim poście. Animacje nie zdążają się ukończyć przed wykonywaniem kolejnych instrukcji.
			$("p.tytul2").text(tytul[liczba - 1]);
 
			$("p.podpis2").text(opis[liczba - 1]);
// zmiana opisów
			$("p.tytul2").fadeIn("slow");
 
			$("p.podpis2").fadeIn("slow");
// wyświetlenie opisów
			setTimeout(function() {	
// kolejne opóźnienie z tego samego powodu
 
 
			$(".aa").attr("src", nazwa);
 
			$(".aa").show();
 
			++liczba;
 
			if ( liczba > 4)liczba = 1;  
 
			nazwa = "grafika/" + liczba.toString() + ".jpg";
 
			$(".bb").attr("src", nazwa);},2000);},600);
 
		}
 
 
 
                        function slideSwitchEvent( obj) {
// No niestety ta funkcja wszystko niszczy. 
 
			var liczba = parseInt(($(".aa").attr("src")).charAt(8));
			var liczba2 = parseInt(($(obj).attr("id")).charAt(3));
 
			var nazwa = "grafika/" + ($(obj).attr("id")).charAt(3) + ".jpg";
 
			$(".bb").attr("src", nazwa);
 
			$(".aa").fadeOut("slow");
 
			$("p.tytul2").fadeOut("slow");
 
			$("p.podpis2").fadeOut("slow");
 
			var a = "#but" + liczba2.toString();			
 
			$(a).attr("class", "butC");
 
			a = "#but" + liczba.toString();
 
			$(a).attr("class", "but");
 
			setTimeout(function() {
 
			$("p.tytul2").text(tytul[liczba2]);
 
			$("p.podpis2").text(opis[liczba2]);
 
			$("p.tytul2").fadeIn("slow");
 
			$("p.podpis2").fadeIn("slow");
			setTimeout(function() {	
 
 
 
			$(".aa").attr("src", nazwa);
 
			$(".aa").show();
 
			++liczba;
 
			if ( liczba > 4)liczba = 1;
 
 
			nazwa = "grafika/" + (liczba2 - 1) + ".jpg";
 
			$(".bb").attr("src", nazwa); },2000); },600);
 
		}
 
       $(function() {
// co 5s wywoływana zmiana slajdu
    		setInterval( "slideSwitchNormal()", 5000 );
 
		});
 
$("#but1").click(function () {
			slideSwitchEvent("#but1");
		});
		$("#but2").click(function () {
			slideSwitchEvent("#but2");
		});
		$("#but3").click(function () {
			slideSwitchEvent("#but3");
		});
		$("#but4").click(function () {
			slideSwitchEvent("#but4");
		});
// Prowizoryczne funkcje do klikania, wiem, że to powinna być jedna, używająca this, ale to tylko taka prowizorka żeby sprawdzić
[PHP] pobierz, plaintext 

Nie analizowałem kodu jakoś specjalnie, więc popraw mnie jeżeli gdzieś jest błąd.

Posiadasz galerię zdjęć, gdzie co 5 sekund ma pojawić się następne zdjęcie. Istnieje jednak możliwość kliknięcia w jakąś miniaturkę/przycisk "dalej" by ręcznie zmienić zdjęcie. Problem jest w tym, że jeżeli w 4 sekundy po samoczynnym zmienieniu się zdjęcia kliknę na następne, już po sekundzie samoczynnie zmienia się ono na kolejne. - Czy ten opis jest poprawny?

1. Powinieneś utworzyć sobie jedną funkcję, która będzie przyjmować jeden argument, tj. zdjęcie do wyświetlenia. Ta funkcja powinna zostać pośrednio wywołana zarówno przez automat (co 5 sekund) jak i przez użytkownika (przy kliknięciu). Pośrednio, czyli jako callback dla setInterval i $.click(); użyjesz innych funkcji, które będą ją wywoływać.
2. setInterval zwraca uchwyt do interwału. Uchwyt ten powinieneś zapisać w jakiejś zmiennej, która będzie ogólnodostępna. W funkcji wywoływanej przy kliknięciu użytkownika zatrzymasz ten interwał (clearInterval) oraz ustawisz go na nowo (ponownie setInterval). Dzięki temu, po kliknięciu zawsze trzeba będzie odczekać 5 sekund na samoczynną zmianę.

Jeżeli coś jest nie tak, wrzuć kod online (np. na jsfiddle.net).

Dzięki za odpowiedź, była bardzo pomocna. Jednak nawet jeśli zastosuje to dla mojego algorytmu, to niestety mam dalej problemy. Dlatego będę chyba musiał go zmienić. Możesz wyjaśnić jak zmieniać obrazki inaczej niż za pomocą attr("src", nowaWartość) ?

Możesz wczytywać wszystkie obrazki z odpowiednim z-index albo wykorzystać parametr opacity lub oczywiście display: none;. Jest to dużo lepsze niż zamiana atrybutu src

Mam nadzieję, że nie sprawie kłopotu, jeśli spytam o jeszcze jedną rzecz. Co zrobić, żeby funkcja wykonała się do końca, nawet jeśli nastąpi zdarzenie click podczas jej wykonywania?

Inaczej: Funkcja dokonuje jakichś zmian po kliknięciu. JEśli kliknę kilka razy szybko, to tamte funkcje nie zdążają się wykonać w całości, są przerywane w połowie wykonania, a tego nie chcę. Chcę, żeby jak kliknę dziesięć razy to żeby funkcje wykonały się dziesięć razy od początku do końca.

Niestety kolejki jquery nie są rozwiązaniem bo działają tylko dla animacji. Mogę wymusić żeby za pomocą funkcji queue( funkcja ) animacje wykonywały się w całości, jednak to już nie działa dla funkcji, które dokonują operacji