【问题标题】：Send button with certain features具有某些功能的发送按钮
【发布时间】：2017-07-07 00:25:30
【问题描述】：

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>

姜戈

我的 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，这样它就不会做这样的事情了？

【问题讨论】：

首先，我认为您只是没有将正确的消息 ID 放在那里。在您的 javascript 中将您的 $("#message") 更改为 $("#send-message")
@Leila 谢谢，但到目前为止还没有解决我的问题？
@J.Doe，即使您使它工作，此代码也不会阻止任何人重新加载页面并在您的限制之前发送消息。抱歉，这个解决方案看起来没什么用。
@KoshVery 是的，我知道。根据您的说法，是否有一种聪明的方法可以修改它，以便即使我们重新加载页面也能正常工作？我可以用其他东西代替 setTimeout 吗？
@J.Doe，由于我们不能信任客户端，我们必须在服务器端存储和检查此信息。让只有登录的用户才能发送消息。将user_id + last_msg_time 写入数据库。当客户端请求页面时，您检查该用户的时间是否到了。如果用户可以发送消息，请向他们展示表单。如果他们还不能发送，则向他们显示剩余时间而不是表格。在用户发送消息后，也会显示他们的提醒时间，但如果他们重新加载页面，他们将不会再次看到表单，直到时间结束。这是更复杂的方法，但更防弹。希望对您有所帮助。

标签： javascript python html css django

【解决方案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")

【讨论】：