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

Question

我正在使用剪贴板.js和一个Bootstrap版本，该版本允许使用Vanilla JS （我尝试使用更少的抽象，以便可以更好地理解JS）。

无论如何，我注意到第一次单击延迟可以正常工作。 但是它周围的第二次立即触发。 演示

$('.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（'show'）来呈现新的工具提示消息

片段：

 $('.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(); }); } 

 .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;} 

 <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> 

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)

}

这样，您便拥有了一种用于何时淡化工具提示的实用方法。 我认为如果要为工具提示使用不同的UI，这将非常有用

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

Answer 3

setTimeout(foo(), 5000);

将立即运行功能

setTimeout(foo, 5000);

5秒后运行

您应该将函数放在setTimeout内，而不是在函数内放上setTimeout。