【问题标题】:Delay Javascript button onClick using setTimeout使用 setTimeout 延迟 Javascript 按钮 onClick
【发布时间】:2013-05-19 21:49:39
【问题描述】:

我遇到了延迟单击按钮的问题。我已经通过 stackoverflow 进行了搜索,并找到了几个答案,使用 setTimeout 很容易,但我无法让它在我正在处理的工作中工作。以下是代码示例:

AJAX 在提交按钮点击时将数据提交到数据库

<script>
  $(function () {
    $('form').on('submit', function (e) {
      $.ajax({
        type: 'post',
        url: 'post.php',
        data: $('form').serialize(),
      });
      e.preventDefault();
    });
  });
</script>

推送代码

<script>
    $(function() {

    var pusher = new Pusher('pusher')
    var activityChannel = pusher.subscribe('stream');
    var activityMonitor = new PusherActivityStreamer(activityChannel, "#current");

    var examples = new ExampleActivities(activityMonitor, pusher);

    $("#broadcast").click(function(){
        activityMonitor.sendActivity('broadcast');
    });
    $("#submit").click(function(){
        activityMonitor.sendActivity('submit');
    });
    });
</script>

HTML 按钮

<input id="submit" name="submit" type="submit" value="Submit" onclick="addMEM()"><br>
<button id="broadcast">Broadcast</button>

提交按钮上的 onclick="addMEM()" 用于另一个脚本。这是一个非常繁忙的按钮。

所以发生的事情是我单击提交,然后 ajax 脚本将数据推送到 post.php,然后将其提交到数据库。使用相同的提交单击触发 Pusher 代码,最终将提交的数据从数据库中拉回并将其广播给所有连接的人。

我遇到的问题是 Submit 将数据提交到数据库并触发同时从数据库中提取的 Pusher。 75% 的时间,推送代码会在 Submit 提交之前尝试从数据库中提取数据。

我把 setTimeout 放在我能想到的任何地方,只是不能延迟 Pusher 代码。有什么建议么?如果 Submit AND Broadcast 按钮有延迟也没关系。点击提交延迟AJAX代码或者onclick=addMEM()是不行的

很抱歉让事情变得如此复杂。这是一个长期项目的最后一步,如果我能完成这项工作,那么所有的 CSS、数据输入和数学都是从这里开始的。

【问题讨论】:

  • 运行“Pusher”代码作为$.ajax() 调用的回调。

标签: javascript jquery pusher


【解决方案1】:

我建议将 success 回调传递给 jQuery.ajax 方法,该方法会像这样触发广播:

$.ajax({
  type: 'post',
  url: 'post.php',
  data: $('form').serialize(),
  success: function () {
    activityMonitor && activityMonitor.sendActivity('broadcast');
  }
});

使用 setTimeout 的解决方案如下所示:

$("#broadcast").click(function(){
    setTimeout(function () { activityMonitor.sendActivity('broadcast') }, 2000);
});

【讨论】:

  • 非常感谢!我什至将设置的超时设置在那条确切的行上,但我只是将其设置为 SetTimeout(code, 2000)。谢谢!
猜你喜欢
  • 1970-01-01
  • 2019-06-10
  • 2022-08-02
  • 1970-01-01
  • 2021-02-23
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多