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

Question

I am using clipboard.js and a version of Bootstrap which allows one to use vanilla JS (I am trying to use less abstractions so I can understand JS better).

Anyway, I noticed the first time around when I click the delay worked correctly. But the second time around it fires immediately; 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();
    });
}

Anyone have any insights? I have checked similar posts but the usual problem is when someone executes the function immediately, instead of passing a reference. Like the example below.

setTimeout(foo(), 5000);

Answer 1

You could change setTooltip and hideTooltip functions so that they will be:

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

The points of interests here are:

• clear previous hideTooltip timeout, if any
• delay a bit $(btn).tooltip('show') to render the new tooltip message

The snippet:

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

What does the clearSelection function do? Either way, Bootstrap offers events for tooltips. So I would approach it more like this.

$(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)

}

This way you have a utility method for when to fade tooltips. I think it's pretty useful if you're going to have different UI for tooltips

note: You may need to pass the arguments into the settimout function

Answer 3

setTimeout(foo(), 5000);

Will run the function immidiately

setTimeout(foo, 5000);

Will run function after 5 s

Instead of puttin setTimeout inside the function you should put the function inside setTimeout