jquery - 如何在单击 div 时为正在运行的函数添加延迟

Question

我有一个名为 autoSlide 的函数，它可以为 div 的边距设置动画，以将图像精灵显示到 img 标记中

function marginCalc(){
        var getmargin = parseInt($("#scrollimage").css('margin-left'));
        var usemargin =  -1350 ;
        var increment= getmargin+usemargin;
        if(increment <= -2750)
        {
        $("#scrollimage").animate({'margin-left':0},1000);
        }
        else{
        $('#scrollimage').animate({'margin-left': ++increment},1000);
        }
    }
function autoSlide(){
        setInterval(function() {
        marginCalc();
        }, 5000);
        }

当单击 div 时，它会重置边距以显示相应的图像

   $(document).ready(function(){

        $("#Image1").click(function(){
                $("#scrollimage").animate({'margin-left':0});
        });

        $("#Image2").click(function(){
                $("#scrollimage").animate({'margin-left':-1350});
        });

       autoSlide();

       });

我的问题是，当单击 div 时，它会滚动回相应的图像，但 autoSlide 功能继续运行，我想在单击 div 后停止 3 秒以供用户查看图像，然后再次继续运行 autoSlide 功能从那里。

如何实现这一点。提前致谢

Answer 1

超时的简单演示：
DEMO
试试这个：

$(document).ready(function(){

        $("#Image1").click(function(){
                $("#scrollimage").animate({'margin-left':0});
        });

        $("#Image2").click(function(){
                $("#scrollimage").animate({'margin-left':-1350});
        });

    var timeout;
    if(timeout) {
      clearTimeout(timeout);
      timeout = null;
    }

    timeout = setTimeout( autoSlide, 3000);


       });

Answer 2

答案是这个

    function marginCalc(){
            var getmargin = parseInt($("#scrollimage").css('margin-left'));
            var usemargin =  -1350 ;
            var increment= getmargin+usemargin;
            if(increment <= -2750)
            {
            $("#scrollimage").animate({'margin-left':0},1000);
            }
            else{
            $('#scrollimage').animate({'margin-left': ++increment},1000);
            }
        }


$(document).ready(function(){
        var autoslide = setInterval(marginCalc,5000);

        $("#Image1").click(function(){
                 clearInterval(autoSlide);
                $("#scrollimage").animate({'margin-left':0}).delay(3000);
                 autoslide = setInterval(marginCalc,5000);
        });

        $("#Image2").click(function(){
                clearInterval(autoSlide);
                $("#scrollimage").animate({'margin-left':-1350}).delay(3000);
                autoslide = setInterval(marginCalc,5000);
        });

       });