Actuellement, j'ai quelques liens vidéo sur mon site qui, lorsque l'utilisateur clique dessus, la vidéo co-répondante est affichée avec une animation fadeIn et fadeOut. Si l'utilisateur clique sur say ... video 1 puis clique sur video 2 avant la fin de l'animation, il affiche 2 vidéos alors qu'il ne devrait en afficher que 1. Est-ce que quelqu'un maintenant comment empêcher javascript d'exécuter plusieurs fonctions à la fois?

Code:

$(function(){

var animeReviewsLink = $('#anime-reviews-link');
var animeReviews = $('#anime-reviews');
var animeReviewsText = $('#anime-reviews-text');
var animeCommentsLink = $('#anime-comments-link');
var animeComments = $('#anime-comments');
var animeCommentsText = $('#anime-comments-text');
var animeImagesLink = $('#anime-images-link');
var animeImages = $('#anime-images');
var animeImagesText = $('#anime-images-text');
var animeVideosLink = $('#anime-videos-link');
var animeVideos = $('#anime-videos');
var animeVideosText = $('#anime-videos-text');

var active1 = animeReviewsLink;
var active2 = animeReviews;
var active3 = animeReviewsText;

animeReviewsLink.click(function(e)
{
    active3.hide();
    active1.show();
    animeReviewsLink.hide();
    animeReviewsText.show();
    active2.slideUp(400);
    animeReviews.slideDown(400);
    active1 = animeReviewsLink;
    active2 = animeReviews;
    active3 = animeReviewsText;
    setTimeout(function(){},500);
});

animeCommentsLink.click(function(e)
{
    active3.hide();
    active1.show();
    animeCommentsLink.hide();
    animeCommentsText.show();
    active2.slideUp(400);
    animeComments.slideDown(400);
    active1 = animeCommentsLink;
    active2 = animeComments;
    active3 = animeCommentsText;
    setTimeout(function(){},500);
});

animeImagesLink.click(function(e)
{
    active3.hide();
    active1.show();
    animeImagesLink.hide();
    animeImagesText.show();
    active2.slideUp(400);
    animeImages.slideDown(400);
    active1 = animeImagesLink;
    active2 = animeImages;
    active3 = animeImagesText;
    setTimeout(function(){},500);
});

animeVideosLink.click(function(e)
{
    active3.hide();
    active1.show();
    animeVideosLink.hide();
    animeVideosText.show();
    active2.slideUp(400);
    animeVideos.slideDown(400);
    active1 = animeVideosLink;
    active2 = animeVideos;
    active3 = animeVideosText;
    setTimeout(function(){},500);
});
});

J'ai essayé d'utiliser setTimeout à la fin de chaque fonction, mais il semble que cela ne l'empêche pas d'exécuter plusieurs fonctions en même temps.

EDIT: exemple de violon - http://jsfiddle.net/vcvpu22q/

Merci.

0
Logan Hasbrouck 13 juil. 2015 à 22:26

4 réponses

Meilleure réponse

Et quelque chose comme ça? (édité)

$(function(){
var button1 = $('#button1');
var button2 = $('#button2');
var button1text = $('#button1text');
var button2text = $('#button2text');
var button1click = $('#button1click');
var button2click = $('#button2click');    
var canClickButton = true;

button1.click(function(e){
    if(!canClickButton){return;}

    canClickButton = false;
    button2text.hide();
    button2.show();
    button1.hide();
    button1text.show();
    button2click.fadeOut(500,function(){button1click.fadeIn(500)});

    setTimeout(function(){canClickButton = true;}, 1000);

});

button2.click(function(e){
    if(!canClickButton){return;}

    canClickButton = false;
    button1text.hide();
    button1.show();
    button2.hide();
    button2text.show();
    button1click.fadeOut(500, function(){ button2click.fadeIn(500) } );

    setTimeout(function(){canClickButton = true; }, 1000);

});

});

1
MazzCris 13 juil. 2015 à 20:23

Vous pouvez utiliser e.preventDefault ();

$(function(){

var animeReviewsLink = $('#anime-reviews-link');
var animeReviews = $('#anime-reviews');
var animeReviewsText = $('#anime-reviews-text');
var animeCommentsLink = $('#anime-comments-link');
var animeComments = $('#anime-comments');
var animeCommentsText = $('#anime-comments-text');
var animeImagesLink = $('#anime-images-link');
var animeImages = $('#anime-images');
var animeImagesText = $('#anime-images-text');
var animeVideosLink = $('#anime-videos-link');
var animeVideos = $('#anime-videos');
var animeVideosText = $('#anime-videos-text');

var active1 = animeReviewsLink;
var active2 = animeReviews;
var active3 = animeReviewsText;

animeReviewsLink.click(function(e)
{
    e.preventDefault();
    active3.hide();
    active1.show();
    animeReviewsLink.hide();
    animeReviewsText.show();
    active2.slideUp(400);
    animeReviews.slideDown(400);
    active1 = animeReviewsLink;
    active2 = animeReviews;
    active3 = animeReviewsText;
    setTimeout(function(){},500);
});

animeCommentsLink.click(function(e)
{
    e.preventDefault();
    active3.hide();
    active1.show();
    animeCommentsLink.hide();
    animeCommentsText.show();
    active2.slideUp(400);
    animeComments.slideDown(400);
    active1 = animeCommentsLink;
    active2 = animeComments;
    active3 = animeCommentsText;
    setTimeout(function(){},500);
});

animeImagesLink.click(function(e)
{
    e.preventDefault();
    active3.hide();
    active1.show();
    animeImagesLink.hide();
    animeImagesText.show();
    active2.slideUp(400);
    animeImages.slideDown(400);
    active1 = animeImagesLink;
    active2 = animeImages;
    active3 = animeImagesText;
    setTimeout(function(){},500);
});

animeVideosLink.click(function(e)
{
    e.preventDefault();
    active3.hide();
    active1.show();
    animeVideosLink.hide();
    animeVideosText.show();
    active2.slideUp(400);
    animeVideos.slideDown(400);
    active1 = animeVideosLink;
    active2 = animeVideos;
    active3 = animeVideosText;
    setTimeout(function(){},500);
});
});
0
Bhavin Solanki 13 juil. 2015 à 19:30

Utilisez .stop () avant toute autre chose. Il arrêtera l'animation en cours et fera la vôtre au lieu de les exécuter à l'infini.

Donc, dans vos fonctions de clic, ajoutez:

active3.stop().hide();
active1.stop().show();

Etc.

0
Ted 13 juil. 2015 à 19:28

Voici comment je l'ai fait:

button1.click(function (e) {
        if (animation == 0) {
            animation = 1;
            button2text.hide();
            button2.show();
            button1.hide();
            button1text.show();
            button2click.fadeOut(400, function () {
                animation = 0;
            });
            setTimeout(function () {
                button1click.fadeIn(500);
            }, 500);
        }

    });

Jetez un œil au JSFiddle

Ce que j'ai fait, c'est définir une variable animation. L'un ou l'autre ensemble de codes est autorisé à s'exécuter si animation vaut 0. Sinon, ils ne s'exécutent pas. Cela leur donne des droits exclusifs pour exécuter leur procédure.

0
Ahs N 13 juil. 2015 à 20:45