短暂延迟后如何触发点击

Question

I am building a Backbone App, my view is like this

define(function (require) {

    'use strict';

    var MyBackbone      = require('mybackbone'),
        template        = require('utils/template'),
        Handlebars      = require('handlebars'),
        Contest          = require('controllers/ads/contest');

    var Main = MyBackbone.View.extend({

        initialize : function( options ) {
            MyBackbone.View.prototype.initialize.apply(this, [options]);
            this.template = Handlebars.compile( template.get( "presentation/page/main" ) );
            this.loadChildViews( "footer", new Contest() );
        },

        render: function(){
            var renderedContent = this.template();
            this.$el.html( renderedContent );
            return this;
        },

        events: {
            "click .show-message": "hideAndShowMessage"
        },

        hideAndShowMessage: function(e){
            var self = this;
            e.preventDefault();
            this.$el.find('.is-hidding:visible').addClass('hideFade');
            this.$el.find('.bg-lets-go').removeClass('hideFade');
            var targetLink = $(e.currentTarget);
            targetLink.removeClass('show-message');
            setTimeout(function(){
                $('a.no-style:not(".show-message")', self.$el).trigger("click");
                //$('a.no-style:not(".show-message")').click();
                //targetLink.trigger('click');
            }, 750);
        }
    });

    return Main;
});

and my main.jade

div.main-container
    .container-fluid.is-hidding
        .row
            .col-xs-6
                a.no-style.btn-ipurpose.show-message(href="/#ipurpose")
                    i.fa.fa-tree.fa-3x
                    | JE PROPOSE

            .col-xs-6
                a.no-style.btn-ichoose.show-message(href="/#ichoose")
                    i.fa.fa-flag-checkered.fa-3x
                    | JE CHOISIS

.bg.bg-lets-go.is-hidding.hideFade
.bg.bg-simple

the goal is to display a "let's go message" for 750ms after the link is clicked.

I have tried few stuff into the setTimeout but none of them work. No javascript error, is it the right way to do so ?

Answer 1

It seems to me you are making a mistake in your logic.

You are again sending the click event to the same anchor which was clicked before. A listener will still be bound to this element, resulting in hideAndShowMessage to be called again. In that method you call e.preventDefault() again. You start the timeout after which the click is send and we start all over again; basically an infinite loop.

A quick-fix for your issue would be to make the preventDefault call conditional:

var targetLink = $(e.currentTarget);
if(targetLink.hasClass(".show-message")) {
    e.preventDefault();
    //....rest of your logic
}

This should do the trick!