なぜ私のsetTimeout関数はこの遅延を無視していますか？

Question

私はclipboard.js、もう1つは（私はより良いJSを理解できるように、以下の抽象化を使用しようとしています）vanilla JSを使用することができますブートストラップのバージョンを使用しています。

はとにかく、私は私がクリックしたときに遅延が正しく働いていた最初の頃に気づきました。しかし、その周りの2回目はすぐに発火します。 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（ '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); 

に引数を渡す必要がありimmidiately

setTimeout(foo, 5000); 

5秒後に関数を実行します

関数内にsetTimeoutを代入するのではなく、関数をsetTimeoutの内側に置く必要があります。