кнопка отключения с таймаутом

Question

У меня есть эта форма с условиями, которые предупреждают ошибки проверки перед отправкой данных. проблема заключается в том, что если кто-то дважды щелкает (по ошибке, возможно), форма отправляется, форма сбрасывается при первом щелчке, а второй клик предупреждает «form empty», что может сбивать с толку, поскольку все это происходит в течение секунды , поэтому я хочу временно отключить кнопку при нажатии на 3 секунды. но то, что у меня сейчас, просто отключает всю функцию в течение 3 секунд, а не просто отключает кнопку. как я должен это делать? здесь приведен упрощенный вариант формы. Благодаря

$('#send').click(function(){ 

    var self = $('#send'); 
     setTimeout(function() { 
     self.disabled = false; 
    if(!$('#text').val()){ 
     alert('field empty'); 
    }else{ 
     $('#message').html('done'); 
     $('#text').val(''); 
    } 
    }, 3000); 
}); 

Answer 1

Я написал небольшой пример для вас, отключая кнопку на мыши. Таймаут активирует кнопку после 3000 миллисекунд.

Working demo

HTML:

<input id="text"> 
<input id="send" type="button" value="send"/> 
<div id="message"></div> 

Javascript:

$('#send').click(function(){ 
    var button = $(this); 
    button.attr('disabled', 'disabled'); 
    setTimeout(function() { 
     button.removeAttr('disabled'); 
    },3000); 
    if(!$('#text').val()){ 
     alert('field empty'); 
     button.removeAttr('disabled'); 
    }else{ 
     $('#message').html('done'); 
     $('#text').val(''); 
    } 
}); 

Answer 2

Вы можете использовать JQuery-х one() вместо click(). Как только функция будет запущена, она будет отключена.
Если вы хотите снова включить его, вы можете поместить таймаут, чтобы повторно связать его в конце функции.

Используя свой метод, похоже, вы никогда на самом деле отключение кнопки:

this.disabled = 'disabled'; 

Answer 3

Вы не правильно отключить кнопку. Вы устанавливаете свойство .disabled на объект jQuery, а не на обернутый элемент DOM.

Try:

self.prop('disabled', false); 

Вместо:

self.disabled = false; 

EDIT:

На самом деле этот код пытается повторно ebable кнопку. Не было кода для отключения кнопки.

Я также думаю, что вы хотите выполнить проверку сразу. Вызов setTimeout() должен быть просто для повторного включения кнопки, как это:

$('#send').click(function() { 
    var self = $(this); 

    // Disable the button. 
    self.prop('disabled', true); 

    // Process click. 
    if (!$('#text').val()) { 
     alert('field empty'); 
    } else { 
     $('#message').html('done'); 
     $('#text').val(''); 
    } 

    // Cause the button to re-enable after 3 seconds. 
    setTimeout(function() { 
     self.prop('disabled', false); 
    }, 3000); 
});