具有特定功能的发送按钮

Question

的Javascript

$(function(){
  $('.select-another-button').each(function(){
    $(this).bind('click', function(e) {
      $(this).attr('disabled','true'); //disables the button
      $('#overlay').show(); //after disabling show the overlay for hover
      setTimeout(function(){ 
        $(this).attr('disabled','false'); //enables after 5mins
        $('#overlay').hide(); //hide the overlay
      }, 300000);
      e.preventDefault();
      fileBrowser(this);
      return false;
    });
  });
});

$("#overlay").hover(function(){
    $('#message').show();
},function(){
    $('#message').hide();
});

CSS

.title-actions {
  float: right;
  height: 50px;
  margin-top: 13px; }
  .title-actions a {
    transition: background 0.3s ease; }
    .title-actions a.btn {
      padding: 2px 14px;
      line-height: 26px;
      max-height: 28px;
      position: relative;
      top: -1px;
      margin-left: 8px; }
    .title-actions a:hover {
      background: #4382b5; }
  .title-actions span {
    color: #444;
    background: #e6e6e6;
    padding: 6px 10px;
    border-radius: 3px;
    float: none;
    position: relative;
    margin-left: 6px; }
  .title-actions .btn {
    padding: 2px 14px;
    line-height: 26px;
    max-height: 28px;
    position: relative;
    top: -1px;
    margin-left: 8px; }
  .title-actions .btn-icon {
    background: transparent;
    position: relative;il 
    color: #3e5366;
    text-align: center;
    display: inline-block;
    padding: 0 !important;
    transition: color 0.3s ease;
    box-shadow: none !important;
    margin-top: -16px;
    margin-left: 6px; }
    .title-actions .btn-icon i {
      font-size: 35px;
      line-height: 20px;
      position: relative;
      top: 12px; }
    .title-actions .btn-icon:hover {
      color: #4382b5;
      background: transparent; }
  .title-actions .badge .material-icons {
    font-size: 1.2em;
    line-height: 0;
    position: relative;
    top: 4px; }
.wrapper {
    display: inline-block;
}

HTML

    <div class="wrapper">
        <div id="overlay"></div>
        <a href="#"
           title="{% trans "Send email - rejected file(s)" %}"
           class="btn btn-icon select-another-button"
           data-url="{% url "messaging:send" request_id=object.pk %}">
            <i class="material-icons">assignment_late</i>
            <div class='alert alert-success' id='send-message' style="display: none;">
                <p>
                The message was sent to the client. Please wait 5 minutes <br> before sending the message again.
                </p>
            </div>
        </a>
    </div>

的Django

我在urls.py文件中有这个

app_name = 'messaging'
urlpatterns = [
    ...

    url(r'^send/(?P<request_id>[0-9]+)/$',
        send, name='send'),
]

django的方法是具有某些功能的发送按钮

@staff_member_required
@csrf_exempt
def send(request, request_id=None):
    req= Request.objects.get(pk=request_id)
    request_folders = req.folder.all_files.all()
    context = []

    for doc in request_folders:
        if doc.meta.state == u'rejected':
            context.append(doc)

    if context:
        ctx = {'request': req}
        EmailFromTemplate('document-refusal', extra_context=ctx)\
            .send_to(req.customer.user)

    return HttpResponse('')

我创建了一个按钮，可以在特定条件下发送电子邮件。我希望一旦发送消息以停用按钮五分钟，然后显示一条弹出消息，该消息将显示剩余时间，然后他们才有可能再次发送电子邮件。消息可能是＆＃39; 在您再次发送消息之前，它仍然是3分钟和20秒。＆＃39;。当且仅当光标在按钮上时才会显示此消息，否则不会发生任何事情。到目前为止，当我点击按钮时，它关闭了，但没有其他事情发生。我的意思是django的功能永远不会被调用，....我怎么能修复它以便它能做我想做的事情？如何在该消息中显示剩余时间？使用JsonResponse()？

修改：

我有setTimeout的另一个问题。客户端很容易重新加载页面以跳过5分钟的等待。我可以用setTimeout代替它，以便它不会做这样的事情？

Answer 1

为了节省时间，您可以使用以下内容：

$(function(){
var timeout;
  $('.select-another-button').each(function(){
    $(this).bind('click', function(e) {
      $(this).attr('disabled','true'); //disables the button
      $('#overlay').show(); //after disabling show the overlay for hover
      timeout = setTimeout(function(){ 
        $(this).attr('disabled','false'); //enables after 5mins
        $('#overlay').hide(); //hide the overlay
      }, 300000);
      e.preventDefault();
      fileBrowser(this);
      return false;
    });
  });
});

$("#overlay").hover(function(){
  var timeleft =  Math.ceil((timeout._idleStart + timeout._idleTimeout - Date.now()) / 1000);
    $('#send-message').html("Please wait" + timeleft).show();
},function(){
    $('#send-message').hide();
});

如果show()和hide()无效，请尝试.css("display","block")