Question

我正在使用clipboard.js和一个允许使用vanilla JS的Bootstrap版本（我试图使用较少的抽象，以便我更好地理解JS）。

无论如何，当我点击延迟正常工作时，我注意到第一次。但第二次它立即发射; demo

$('.copyButton').tooltip({
    trigger: 'click',
    placement: 'bottom'
});

function setTooltip(btn, message) {
    $(btn).tooltip('hide')
        .attr('data-original-title', message)
        .tooltip('show');
}

function hideTooltip(btn) {
    setTimeout(function() {
        $(btn).tooltip('hide');
    }, 5000);
}
/* clipboard.js */
var clipboard = new Clipboard('.copyButton');
clipboard.on('success', function(e) {

    setTooltip(e.trigger, 'Copied!');
    hideTooltip(e.trigger);
    e.clearSelection();
    console.log(e);
});
clipboard.on('error', function(e) {
    setTooltip(e.trigger, 'Failed!');
    hideTooltip(e.trigger);
    console.log(e);
});


/* preventDefault on buttons */
var btns = document.querySelectorAll('.style-guide');
for (var i = 0, l = btns.length; i < l; i++) {
    btns[i].addEventListener('click', function(e) {

        e.preventDefault();
        e.stopPropagation();
    });
}

任何人都有任何见解？我检查了类似的帖子，但通常的问题是有人立即执行该功能，而不是传递引用。如下例所示。

setTimeout(foo(), 5000);

Answer 1

您可以更改 setTooltip 和 hideTooltip 功能，以便它们成为：

function setTooltip(btn, message) {
    $(btn).attr('data-original-title', message);
    setTimeout(function() {
        $(btn).tooltip('show');
    }, 150);
}

var intervalId = null;
function hideTooltip(btn) {
    if (intervalId != null) {
        clearTimeout(intervalId);
    }
    intervalId = setTimeout(function() {
        $(btn).tooltip('hide');
        intervalId = null;
    }, 5000);
}

这里的兴趣点是：

清除之前的hideTooltip超时，如果有的话
延迟一点$（btn）.tooltip（＆＃39; show＆＃39;）以呈现新的工具提示消息

摘录：

＆＃13;

$('.copyButton').tooltip({
  trigger: 'click',
  placement: 'bottom'
});

function setTooltip(btn, message) {
  $(btn).attr('data-original-title', message);
  setTimeout(function() {
    $(btn).tooltip('show');
  }, 150);
}

var intervalId = null;
function hideTooltip(btn) {
  if (intervalId != null) {
    clearTimeout(intervalId);
  }
  intervalId = setTimeout(function() {
    $(btn).tooltip('hide');
    intervalId = null;
  }, 5000);
}
/* clipboard.js */
var clipboard = new Clipboard('.copyButton');
clipboard.on('success', function(e) {

  setTooltip(e.trigger, 'Copied!');
  hideTooltip(e.trigger);
  e.clearSelection();
  
});
clipboard.on('error', function(e) {
  setTooltip(e.trigger, 'Failed!');
  hideTooltip(e.trigger);
  
});



/* preventDefault on buttons */
var btns = document.querySelectorAll('.style-guide');
for (var i = 0, l = btns.length; i < l; i++) {
  btns[i].addEventListener('click', function(e) {

    e.preventDefault();
    e.stopPropagation();
  });
}

＆＃13;

.piglet {
  background: #FFD3E0;
  /* fallback for old browsers */
  background: -webkit-linear-gradient(to left, #FFD3E0, #fff);
  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to left, #FFD3E0, #fff);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

pre > span {
  color: #c7177f;
  font-weight: 800;
}

pre > .attribute-value-color {
  color: #7c064c
}

#navbar {
  position: relative;
  margin-left: auto;
  margin-right: auto;
}

#navbar ul {
  margin-left: 35%;
}

.navbar-black {
  background: #000000;
}

.glyphicon {
  position: relative;
  top: 1px;
  display: inline-block;
  font-family: 'Glyphicons Halflings';
  font-style: normal;
  font-weight: normal;
  font-color: #ffffff;
  line-height: 1;
}

.td-60 {
  width: 60%;
}

.td-30 {
  width: 20%;
}

span.glyphicon.glyphicon-menu-right {
  font-size: 1.5em;
  padding: 0 0 0 15px;
}

ul.nav.navbar-nav.navbar-center.how-things-work {
  margin: 0px 15px;
}

@media (max-width:1024px) {
  span.glyphicon.glyphicon-menu-right {
    margin-right: 15px
  }
}

@media (max-width:768px) {
  span.glyphicon.glyphicon-menu-right {
    margin-right: 0
  }
}


/* clipboard styles */


/* to remove horizontal scroll bar */

body {
  overflow-x: hidden;
}


/* custom button */

.btn-info {
  color: #fff;
  background: #000;
  border-radius: 0px;
  border: 0px;
  margin-top: 15px;
  padding-top: 15px;
  padding-bottom: 15px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: bold;
}

.btn-info:hover {
  background: #ed008c !important;
}


/* card */

.card {
  padding: 3%;
  width: auto;
  height: auto;
  display: inline-block;
  background-color: #fff;
  border-radius: .25rem;
  border: 1px solid rgba(0, 0, 0, .125);
}

.card-img-responsive {
  display: block;
  width: auto;
  max-height: 100%;
}

.card-img-container {
  display: table;
}

.card-img-row {
  height: 100%;
  display: table-row;
}

.card-vertical-center {
  display: table-cell;
  float: none;
  vertical-align: middle;
}

/* bootstrap override */
.tooltip .tooltip-inner {background-color: #000000; color: #fff;}
.tooltip.top .tooltip-arrow {border-top-color: #000000;}

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://youravon.com/avon-us/.resources/avon-theme/css/avon_styles.min~2016-10-18-07-10-07-342~cache.css">
<link rel="stylesheet" type="text/css" href="https://youravon.com/avon-us/.resources/avon-theme/css/avon_custom.min~2016-10-18-07-10-07-526~cache.css">
<script src="https://code.jquery.com/jquery-2.2.0.min.js "></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js " integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa " crossorigin="anonymous "></script>
<script src="https://antonioportiz.fwd.wf/dam/avon-us/custom/js/lib/bootstrap.native-master/dist/bootstrap-native.js"></script>
<script src="https://antonioportiz.fwd.wf/dam/avon-us/custom/js/lib/clipboard/dist/clipboard.js"></script>


        <pre id="promo-text-left-image-right" class="piglet">
<span class="bracket-color">&lt;</span><span font-weight:700">div</span> <span style="color:#93a1a1">class</span>=<span class="attribute-value-color"><span>"</span>card-img-container<span class="attribute-value-color">"</span></span><span class="bracket-color">></span>
    <span class="bracket-color">&lt;</span><span font-weight:700">div</span> <span style="color:#93a1a1">class</span>=<span class="attribute-value-color"><span class="attribute-value-color">"</span>card-img-row<span class="attribute-value-color">"</span></span><span class="bracket-color">></span>
        <span class="bracket-color">&lt;</span><span font-weight:700">div</span> <span style="color:#93a1a1">class</span>=<span class="attribute-value-color"><span class="attribute-value-color">"</span>card<span class="attribute-value-color">"</span></span><span class="bracket-color">></span>
            <span class="bracket-color">&lt;</span><span font-weight:700">div</span> <span style="color:#93a1a1">class</span>=<span class="attribute-value-color"><span class="attribute-value-color">"</span>col-xs-12 col-sm-6 col-md-6 card-vertical-center<span class="attribute-value-color">"</span></span><span class="bracket-color">></span>
                <span class="bracket-color">&lt;</span><span font-weight:700">h1</span><span class="bracket-color">></span>Curabitur gravida vestibulum imperdiet.<span class="bracket-color">&lt;/</span><span font-weight:700">h1</span><span class="bracket-color">></span>
                    <span class="bracket-color">&lt;</span><span font-weight:700">p</span><span class="bracket-color">></span>Cras convallis ut turpis vitae facilisis. Morbi eu augue vel quam efficitur rhoncus vitae eget lectus. Cras augue ligula, aliquam ut enim ut, feugiat imperdiet sem. Integer sed mi quis nisl eleifend interdum.<span class="bracket-color">&lt;/</span><span font-weight:700">p</span><span class="bracket-color">></span>
                    <span class="bracket-color">&lt;</span><span font-weight:700">p</span><span class="bracket-color">></span>Cras convallis ut turpis vitae facilisis. Morbi eu augue vel quam efficitur rhoncus vitae eget lectus. Cras augue ligula, aliquam ut enim ut, feugiat imperdiet sem.<span class="bracket-color">&lt;/</span><span font-weight:700">p</span><span class="bracket-color">></span>
                        <span class="bracket-color">&lt;</span><span font-weight:700">a</span> <span style="color:#93a1a1">href</span>=<span class="attribute-value-color"><span class="attribute-value-color">"</span>#<span class="attribute-value-color">"</span></span> <span style="color:#93a1a1">class</span>=<span class="attribute-value-color"><span class="attribute-value-color">"</span>btn btn-primary<span class="attribute-value-color">"</span></span><span class="bracket-color">></span>Read More<span class="bracket-color">&lt;/</span><span font-weight:700">a</span><span class="bracket-color">></span>
                    <span class="bracket-color">&lt;/</span><span font-weight:700">div</span><span class="bracket-color">></span>
                    <span class="bracket-color">&lt;</span><span font-weight:700">div</span> <span style="color:#93a1a1">class</span>=<span class="attribute-value-color"><span class="attribute-value-color">"</span>hidden-xs col-sm-6 col-md-6 card-vertical-center<span class="attribute-value-color">"</span></span><span class="bracket-color">></span>
                        <span class="bracket-color">&lt;</span><span font-weight:700">img</span> <span style="color:#93a1a1">class</span>=<span class="attribute-value-color"><span class="attribute-value-color">"</span>center-block card-img-responsive<span class="attribute-value-color">"</span></span> <span style="color:#93a1a1">style</span>=<span class="attribute-value-color"><span class="attribute-value-color">"</span>display:table-cell;<span class="attribute-value-color">"</span></span> <span style="color:#93a1a1">src</span>=<span class="attribute-value-color"><span class="attribute-value-color">"</span>/dam/avon-us/landing-pages/direct-delivery-incentive/e-store.jpg<span class="attribute-value-color">"</span></span> <span style="color:#93a1a1">alt</span>=<span class="attribute-value-color"><span class="attribute-value-color">"</span>eStore image<span class="attribute-value-color">"</span></span><span class="bracket-color">></span>
                    <span class="bracket-color">&lt;/</span><span font-weight:700">div</span><span class="bracket-color">></span>
            <span class="bracket-color">&lt;/</span><span font-weight:700">div</span><span class="bracket-color">></span>
        <span class="bracket-color">&lt;/</span><span font-weight:700">div</span><span class="bracket-color">></span><span style="color:#839496;font-style:italic">&lt;!-- card--></span>
    <span class="bracket-color">&lt;/</span><span font-weight:700">div</span><span class="bracket-color">></span><span style="color:#839496;font-style:italic">&lt;!-- card-img-row --></span>
<span class="bracket-color">&lt;/</span><span font-weight:700">div</span><span class="bracket-color">></span><span style="color:#839496;font-style:italic">&lt;!-- card-img-container --></span>
</pre>
<button class="btn btn-primary copyButton" data-clipboard-action="copy" data-clipboard-target="#promo-text-left-image-right">Copy</button>
</div>
<!-- container end -->
<br>
<br>
<br>
<br>
<br>
<br>

＆＃13;

Answer 2

clearSelection功能有什么作用？无论哪种方式，Bootstrap都提供工具提示的事件。所以我会更喜欢它。

$(tooltipYoureShowing).on('shown.bs.tooltip', function(){
    //method to check if copy was a success

    removeTooltip($(this), 5000);

});

function removeTooltip(el, time){
    setTimeout(function(){
        el.tooltip('hide');
    }, time)

}

通过这种方式，您可以使用实用工具方法来淡化工具提示。我认为，如果您要为工具提示设置不同的用户界面，这非常有用

注意：您可能需要将参数传递给settimout函数

Answer 3

setTimeout(foo(), 5000);

将立即运行该功能

setTimeout(foo, 5000);

5秒后运行功能

而不是puttin setTimeout在函数内部，你应该把函数放在setTimeout

中

为什么我的setTimeout函数忽略了这里的延迟？

3 个答案: