javascript - 具有某些功能的发送按钮

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('')

我创建了一个在特定条件下发送电子邮件的按钮。我希望一旦发送消息即可停用该按钮五分钟，然后显示一条弹出消息，该消息将显示他们可以再次发送电子邮件之前的剩余时间。该消息可能是“距离您可以再次发送该消息还有 3 分 20 秒。”。当且仅当光标位于按钮上时才会显示此消息，否则不会发生任何情况。到目前为止，当我单击按钮时，它会关闭，但没有发生任何其他事情。我的意思是 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")