Javascript 记住 HTML 标签内容并在持续时间后替换

Question

我有以下代码，通过 .swf 解决方案将服务器 IP 复制到客户端的剪贴板。正如您所看到的，它用成功的“已复制”消息替换了“复制 IP”按钮。我该如何让“复制 IP”按钮在显示成功消息 5 秒后返回，以便用户可以从该页面复制并粘贴多个 IP 地址，多次复制同一个 IP 地址。

    <script src="/assets/js/ZeroClipboard.min.js"></script>
    <script>
        function addCopyHandler(id) {
          var client = new ZeroClipboard( document.getElementById(id) );
          client.on( "ready", function( readyEvent ) {
          // alert( "ZeroClipboard SWF is ready!" );
              client.on( "aftercopy", function( event ) {
                  // `this` === `client`
                  // `event.target` === the element that was clicked
                  event.target.innerHTML = "<i class='fa fa-check text-success'></i> Copied";
                  event.target.style.textDecoration = "none";
                  event.target.style.color = "#3c763d";
                  event.target.style.cursor = "default";
              });
          });
        }
        <?php if(!isset($_GET['page'])) {$pagenum = 1;} else {$pagenum = $_GET['page'];}?>
        for(var i = <?php echo $limit_start;?>; i <= <?php echo $limit_amount*$pagenum;?>; i++) {
            addCopyHandler("copy-" + i);
        }
    </script>

Answer 1

只需在 client.on 函数中添加一个 setTimeout 即可。由于 JS 闭包的工作方式，即使 setTimeout 是异步的，它也可以访问 event 对象，并且将在 5 秒后执行:

    function addCopyHandler(id) {
      var client = new ZeroClipboard( document.getElementById(id) );
      client.on( "ready", function( readyEvent ) {
      // alert( "ZeroClipboard SWF is ready!" );
          client.on( "aftercopy", function( event ) {
              // `this` === `client`
              // `event.target` === the element that was clicked
              event.target.innerHTML = "<i class='fa fa-check text-success'></i> Copied";
              event.target.style.textDecoration = "none";
              event.target.style.color = "#3c763d";
              event.target.style.cursor = "default";
              setTimeout(function(){
                  event.target.innerHTML = "Copy IP";
                  event.target.removeAttribute("style");
              },5000);
          });
      });
    }