如何在短暂延迟后触发点击

Question

我正在构建一个Backbone App，我的视图是这样的

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;
});

还有我的 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

目标是在点击链接后 750 毫秒内显示“让我们开始”消息。

我在 setTimeout 中尝试了一些东西，但它们都不起作用。 没有javascript错误，这是正确的方法吗？

Answer 1

在我看来，你的逻辑是错误的。

您再次将点击事件发送到之前点击过的同一个锚点。侦听器仍将绑定到此元素，从而导致再次调用 hideAndShowMessage。在该方法中，您再次调用 e.preventDefault() 。您开始超时，然后点击发送，我们重新开始；基本上是一个无限循环。

您的问题的快速解决方法是将 preventDefault 调用设为有条件的：

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

这应该可以解决问题！