Question

我是jquery的新手并且一直在尝试编写一个简单的图像旋转器，它目前工作得很好，除非你点击“prev”按钮的“下一个”太多次很快就会破坏它图像旋转器。

这是html：

<div id="viewport">
    <div id="imageContainer">
        <div class="image" style="background-color:red;">
            <div class="title"><p>This is the title of the post</p></div>
        </div>
        <div class="image" style="background-color:green;">
            <div class="title"><p>This is the title of the post</p></div>
        </div>
        <div class="image" style="background-color:yellow;">
            <div class="title"><p>This is the title of the post</p></div>
        </div>
        <div class="image" style="background-color:brown;">
            <div class="title"><p>This is the title of the post</p></div>
        </div>
        <div class="image" style="background-color:purple;">
            <div class="title"><p>This is the title of the post</p></div>
        </div>
    </div>
</div>

<input type="button" name="prev" id="prev" value="prev" />
<input type="button" name="next" id="next" value="next" />

和jquery：

var ic = $('#imageContainer');
    var numItems = $('.image').size();
    var position = 0;
    ic.css('left', '0px');

    var inter; 
    var rotateTimeout;

    function rotate(){
        inter = setInterval(function(){
             if (position == (numItems - 1)) {
                console.log(position);
                $('.image').first().insertAfter($('.image').last());
                ic.css('left', '+=400px');
                position--;
            }
            ic.animate({opacity: 0.2, left: "-=400px"}, 1500, function(){
                ic.animate({opacity: 1.0}, 1000);
            });

            position += 1;
        }, 6000);

    }
    rotate();

    $('#prev').click(function () {
        console.log(position);
        if (position == 0) {
            $('.image').last().insertBefore($('.image').first());
            ic.css('left', '-=400px');
            position++;
        }
        ic.animate({
            left: "+=400px"
        });
        position -= 1;

        clearInterval(inter);
        clearTimeout(rotateTimeout);
        rotateTimeout = setTimeout(rotate, 10000);


    });

    $('#next').click(function () {
        if (position == (numItems - 1)) {
            console.log(position);
            $('.image').first().insertAfter($('.image').last());
            ic.css('left', '-400px');
            position--;
        }
        ic.animate({
            left: "-=400px"
        });
        position += 1;

        clearInterval(inter);
        clearTimeout(rotateTimeout);
        rotateTimeout = setTimeout(rotate, 10000);



    });

这是demo of the rotator。

那么我怎样才能阻止用户过快点击按钮，或者只是每两秒钟点击一次以允许旋转器做它需要的东西？

Answer 1

要限制功能调用频率，您可以使用一些“节流”功能。例如来自Underscore.js的_.throttle或任何其他实现。没有必要使用整个库，只能从那里复制所需的功能。

事件处理程序附件如下所示：

$('#prev').click( _.throttle(function () { yours code... }, 2000) );

如何在打破图像旋转器时停止点击下一次？

1 个答案: