如果一个功能处于活动状态，如何禁用点击

Question

我是一名有用的助手，可以翻译文本。

我已经在这里创建了一个函数的示例（http://jsfiddle.net/rhy5K/10/）。现在，如果声音正在播放，我想禁用按钮点击，即播放/暂停，例如准备好了，5,4,3,2,1。

我只知道如何禁用表单提交按钮，但是我非常困惑如何禁用点击，在我的情况下是超链接。

使用代码示例解释：

我想禁用此处的

<a href="#" id="btn_start">PLAY</a>

当解释器执行以下代码时，点击：

var playGetReady = function (done) {
    var ids = ['audiosource', 'a_5', 'a_4', 'a_3', 'a_2', 'a_1'],
        playNext = function () {
            var id = ids.shift();
            document.getElementById(id).play();
            if (ids.length) {
                setTimeout(playNext, 1000);
            } else {
                done();
            }
        };
    playNext();
};

警告：这个JS fiddle演示可能在加载时播放声音

- beginner

---

为什么我没有得到对上面问题的任何答案？是因为我的问题不恰当还是我犯了其他错误？ - beginner

欢迎来到StackOverflow。StackOverflow是一个主要由人类居住的地方。虽然有一些巫师可以在6分钟内写出最惊人的答案，但大多数人需要更多时间。请耐心等待... - Sumurai8

https://dev59.com/aGox5IYBdhLWcg3wGwlo - Sergio

一个简单的解决方案是...在运行计时器时设置一个标志，例如 window.__compilerbusy = true，当计时器完成时将其设置为 false。在按钮点击处理程序中，检查该标志。 - gp.

当编译器正在执行时，对于JavaScript来说，它实际上是解释器。 - The Alpha

@gp。谢谢你，但我发现“自2003年以来恢复”这个答案非常简单和快速。 - beginner

Answer 1

你可以尝试这个（以下函数有更改），但不确定这是否符合你的要求，可能还有其他方法可以实现。

App.prototype.start = function () {
    var self = this;
    // unbind for a while
    self.$button.unbind('click', self.buttonHandler); // <--
    var start = function () {
            // start countdown
            self.intervalHandle = setInterval($.proxy(self.tick, self), 1000);
            // bind again
            self.$button.click($.proxy(self.buttonHandler, self)); // <--
            // change button text to PAUSE
            self.$button.text('PAUSE');
        };

    if (this.newTimer) {
        playGetReady(start);
    } else {
        start();
    }
};

演示。

- The Alpha

---

其实我没有仔细查看其他函数，但逻辑是相同的，可能上下文不同。 - The Alpha

你能更具体地说明你所指的函数吗？ - The Alpha

我认为你想要这个链接。请检查else中App.prototype.end的最后一行。 - The Alpha

很高兴听到这个消息，那么你打算转多少钱进我的账户，哈哈！:p - The Alpha

你有尝试为你的网站heera.it申请Google Adsense吗？ - beginner

Answer 2

在jQuery中，可以通过取消默认操作轻松实现。以下是一个示例。

$("#btn_start").click(function(event){      
    if(not_active_flag){
        // Prevent anchor to active
        return false;
    }else{
        // Anchor active as usual
        return true;
    }       
});

- edisonthk

Answer 3

在您的情况下，该链接最终将调用this.buttonHandler，其代码如下：

App.prototype.buttonHandler = function (e) {
    e.preventDefault(); // prevent anchor default action
    this.toggle(); // toggle play/pause
};

因为在执行playGetReady之前，buttonHandler已经被附加，所以无法让playGetReady附加一个点击处理程序到该锚点元素，使用{{link1：.stopImmediatePropagation()}}来防止其他点击处理程序执行。

在这种情况下，@gp.在评论中提供的解决方案很可能是最好的解决方案。在您的情况下，您甚至可以在应用程序中使用局部变量。如果您使用全局变量，请使用window.yourglobalvariable引用它。如果您使用局部变量，请确保在某个地方定义它，并使用this.yourvariable引用它。将您的buttonHandler更改为：

App.prototype.buttonHandler = function (e) {
    e.preventDefault(); // prevent anchor default action
    if( this.soundready )
        this.toggle(); // toggle play/pause
};

在适当的位置将此变量设置为false，以防止“按钮”起作用。当按钮应该起作用时，请将变量更改为true。我认为这应该在你问题中的done()之前，但你可能对代码执行顺序有更好的想法。

- Sumurai8