0 
$navNext.click(function(event, $diff) {
        if(!$diff) {
            var $lastLi = $nav.find('li:last');
            var $lastLiRight = $lastLi.offset().left + $lastLi.outerWidth();
            if ($arrowsNavRight < $lastLiRight)
                $diff = Math.min($lastLiRight - $arrowsNavRight, 50);
        }

        if($diff) {
            $navPrev.show('fade');
            $nav.animate({
                left: '-='+$diff
                }, function(){
                showNavs();
            });
        }
});

liこれは、1 つの要素のクリック ハンドラです。ulこの計算は、スクロール可能なタブのリストをナビゲートするためのものです。ユーザーはこれliを数回クリックして、目的の位置に到達できます。しかし、さらにスクロールする範囲がない場合は、これを無効にしliます。

問題は、ユーザーがこのli要素をクリックする速度が速すぎると、このすべてのクリック イベントが非表示になる前に実行されるli(showNavs 関数を呼び出す) ことです。の余分なスクロールにつながる可能性がありulます。

これで後続のクリックイベントを制御したいli。つまり、1 つのクリックが進行中の場合、次のクリックを遅らせます。それを行う方法はありますか？

ありがとう

4

3 に答える 3

0

変数を使用しactiveます。イベントが発生した場合は、まずactive == false. そうでない場合は、スクリプトを実行しないでください。それが false の場合は、それを設定して自分の作業を行っtrueてください。スクリプトの実行中、他のイベントによってこのスクリプトが実行されることはありません。スクリプトの最後で、active変数を false にリセットして、新しいイベントを起動できるようにします。

于 2012-06-04T07:38:48.017 に答える
0

このようなことができます

HTML

<a href="#" class="fastclick">Click</a>​

jQuery

var bool = 1;
var tmr;

$(".fastclick").live("click", function(e) {
    if(bool)
    {
        alert("next click after 3 sec");
        bool = 0;
        tmr = setInterval(doTmr,3000);
    }
});

function doTmr()
{
    if(!bool)
    {
        bool=1;
        clearInterval(tmr);
    }
}
​

実施例

于 2012-06-04T08:42:00.627 に答える
0

同様の問題がありました。読み込み中のgif画像を導入することで解決しました... ユーザーがページ上の何かをクリックするのを控えたいときに表示し、前のアクションが完了したら非表示にします。

<script type="text/javascript"> 
function showLoadingBar() {     
$('#overlay').addClass('loading-indicator-overlay');
 $('#loadingbar').addClass('loading-indicator'); }
 function hideLoadingBar() {
 $('#overlay').removeClass('loading-indicator-overlay');
     $('#loadingbar').removeClass('loading-indicator'); } 
</script>

そして body セクションに以下を追加します。

<body>
 <div id="overlay"></div>
 <div id="loadingbar"></div>
 ....
 .... 
</body>

次のスタイルを追加します

<style type="text/css">
.loading-indicator {
 position: absolute;
  height: 80px;
 width: 80px; 
 left: 50%; 
 top: 50%;
 z-index: 1001;
 background: url( '../images/loading.gif' );
 background-repeat: no-repeat;
 background-position: center center; }

//Class for overlay:

.loading-indicator-overlay {
 position: absolute;
  width:100%;
 height: 100%;
 z-index: 1000;
 background-color: black;
 opacity: 0.6; }
 </style>

showLoadingBar()ユーザーが をクリックしたときにliを呼び出し、hideLoadingBar()ユーザーがあなたのli

于 2012-06-04T07:47:22.273 に答える