Ερώτηση σχετικά με setInterval

[rafinos]

Γεια σας παιδιά.

 

Μπορεί να μου εξηγήσει κάποιος κατά πόσο είναι σωστό αυτό που κάνει ο κύριος παρακάτω στο βίντεο με την setInterval();

 

Με λίγα λόγια αυτός καλεί πολλά animate() που έχουν τον ίδιο χρόνο εκτέλεσεις με την setInterval() και αυτή εκτελεί τα animate() ένα προς ένα.

 

 

 

 

 

[vadou]

-Η setInterval καλεί την anonymous function κάθε 3 δευτερόλεπτα.

-Η anonymous function καλεί 7 φορές την animateBg η οποία εκτελεί το animation.

 

Εσένα σε μπερδεύει γιατί η διάρκεια που χρειάζεται να εκτελεστεί η anonymous (21secs) είναι μεγαλύτερη από το interval του setInterval (3secs). Σκέψου ότι κάθε φορά που περάνε τα 3 secs της setInterval ξανακαλεί την anonymous και εφόσον το προηγούμενο animation δεν έχει τελειώσει, οι καινούριες 7 animateBg μπαίνουν κάτω από τις παλιές και περιμένουν να τελειώσουν πριν εκτελεστούν. Είναι σαν να έχεις βάλει εσύ 50 συνεχόμενα animations στη σειρά. Το ένα περιμένει να τελειώσει το προηγούμενο πριν εκτελεστεί.

 

Ίσως να ήταν πιο σωστό το interval να είναι μεγαλύτερο ή ίσο με το duration της function ώστε να έχεις καλύτερο έλεγχο, αλλά και αυτό που έχει κάνει μια χαρά δουλεύει. Απλά έτσι που το έχει κάνει, αν με κάποιο τρόπο σταματήσεις το setInterval, το animation θα συνεχιστεί μέχρι να τελειώσουν τα animateBg που είναι στην ουρά.

[rafinos]

Οκ κατάλαβα.

 

Ευχαριστώ πολύ!

[alou]

Δεν υπάρχει όμως λόγος για jQuery ui, θα το προτιμούσα κάπως έτσι:

        var colors = ['#ffffff', '#ff0000', 'yellow', 'black', '#0000ff'],
	i = 0;

	setInterval(function(){
		if (i>colors.length) {
		    i = 0;
		}
		$('.testarea').css('background', colors[i]);
		i++;

	},3000);

και απλά στο css

.testarea {transition:all 2s linear 0s;}

 ή κάτι ανάλογο στις τιμές.

[XPHSTOS_]

Βασικά μπορεί πλέον να γίνει και μόνο με CSS χωρίς την χρήση της jQuery
Δες ένα γρήγορο example που έκανα.
Site: http://codepen.io/anon/pen/KdPNzq

Απλά πρόσεχε το τελευταίο χρώμα να είναι ίδιο με το 1ο για να κάνει ομαλό replay.

[alou]

lol οντως

[rafinos]

Δεν υπάρχει όμως λόγος για jQuery ui, θα το προτιμούσα κάπως έτσι:

        var colors = ['#ffffff', '#ff0000', 'yellow', 'black', '#0000ff'],
	i = 0;

	setInterval(function(){
		if (i>colors.length) {
		    i = 0;
		}
		$('.testarea').css('background', colors[i]);
		i++;

	},3000);

και απλά στο css

.testarea {transition:all 2s linear 0s;}

 ή κάτι ανάλογο στις τιμές.

 

Και εγώ δεν θέλω το jquery ui αλλά αυτό που μου έγραψες είσαι σίγουρος πως κάνει το ίδιο πράγμα; Νομίζω πως απλώς αλλάζει από το ένα χρώμα μονομιάς το άλλο έτσι δεν είναι;

 

 

Βασικά μπορεί πλέον να γίνει και μόνο με CSS χωρίς την χρήση της jQuery

Δες ένα γρήγορο example που έκανα.

Site: http://codepen.io/anon/pen/KdPNzq

 

Απλά πρόσεχε το τελευταίο χρώμα να είναι ίδιο με το 1ο για να κάνει ομαλό replay.

 

Αυτό το είχα βρει ως λύση αλλά θα έχει θέμα με παλαιότερους browser λογικά.

Γιατί δυστυχώς υπάρχουν ακόμα άτομα που χρησιμοποιούν internet explorer...

[vadou]

Από IE 10+ υποστηρίζει κανονικά animation και keyframes. Για τους πιο παλιούς που νομίζω είναι πολύ λίγοι μπορείς να τους αφήσεις χωρίς animation φαντάζομαι αν είναι κάτι καθαρά εικαστικό.

[alou]

Και εγώ δεν θέλω το jquery ui αλλά αυτό που μου έγραψες είσαι σίγουρος πως κάνει το ίδιο πράγμα; Νομίζω πως απλώς αλλάζει από το ένα χρώμα μονομιάς το άλλο έτσι δεν είναι;

 

 

Όχι, αλλάζει όλα τα χρώματα που βάζεις στο var colors = [ ... με τη σειρά που θα τα βάλεις.

 

όπως θα δεις και οι 2 λύσεις θέλουν ουσιαστικά IE10+ ( css transitions, keyframes ) οπότε ή πας μόνο με css και υποστηρίζεις πιο πρόσφατους browser ή με την αρχική σου λύση ή - ακόμα καλύτερα - με css και fallback js σε περίπτωση IE lt 10

[rafinos]

Όχι, αλλάζει όλα τα χρώματα που βάζεις στο var colors = [ ... με τη σειρά που θα τα βάλεις.

 

όπως θα δεις και οι 2 λύσεις θέλουν ουσιαστικά IE10+ ( css transitions, keyframes ) οπότε ή πας μόνο με css και υποστηρίζεις πιο πρόσφατους browser ή με την αρχική σου λύση ή - ακόμα καλύτερα - με css και fallback js σε περίπτωση IE lt 10

Το έκανα έτσι αλλά δεν ξέρω αν είναι σωστό το σκεπτικό μου.

 

μέσα στην html:

<!--[if IE]>
	<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
	<script type="text/javascript" src="scripts/old_ie_animation.js"></script>
<![endif]-->

και μέσα στο old_ie_animation.js:

$(document).ready(function(){
	var jqueryui = '<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>';
	$("head").append(jqueryui);
	
	//Animate background color
	var colors = ["#00ffff","#000000","#0000ff","#ff00ff","#808080","#008000","#00ff00","#800000","#000080","#808000","#800080","#ff0000","#c0c0c0","#008080","#00CC66","#996633","#800000","#ffffff","#ffff00"];
	var colorlength = colors.length;
	var i = 0;
	var color = "";
	
	function animate_bg(color,time){
		$('body').animate({backgroundColor: color},time);
	}

	color = colors[i];
	animate_bg(color,5000);
	i++
	setInterval(function(){
		if(i < colorlength){
			color = colors[i];
			animate_bg(color,5000);
			i++
		}else{
			color = "#FFFFAD"; //το αρχικό χρώμα
			animate_bg(color,5000);
			i = 0;
		}
	},5000);
	
	animate_bg();
	//Finish animate
});

Το css δεν το βάζω γιατί δουλεύει κομπλέ. Βασικά δουλεύει και σε Internet explorer 9 που το τσέκαρα απλά θέλω να ξέρω αν είναι σωστό το σκεπτικό μου.

 

*χρησιμοποιώ ως condition το <!--[if IE]> γιατί από τον 10 και πάνω δεν δέχεται Conditional Comments.

[alou]

Ναι μια χαρά είναι το σκεπτικό. To jqueryui.js γιατί δεν το έβαλες και αυτό στο conditional?

[rafinos]

Αρχικά σκεφτόμουν να το κάνω εξ ολοκλήρου με javascript και μετά είπα ότι είναι πιο εύκολο έτσι και τελικά έμεινε αυτό στην js