无法让 setTimeout 在 javascript 中工作

Question

我正在使用 jquery 上下滑动一个 div。

由于某种原因 setTimeout 不起作用（看起来像函数范围问题）。

无法弄清楚以下代码有什么问题。 （这两个函数都在 $(document).ready(function(){ } )

$('.slider-thumb').click(function(){
    var source = $(this).attr("src");
    $('#image_view').css('background-image',"url("+source+")");
    $('#image_view').slideDown(1000, calbck);
    initiate_timeout();

    function calbck(){}
});

function initiate_timeout(){
    var time_out = setTimeout(function() {
        $('#image_view').slideUp(1000, calbck);
    },2000);
}

Answer 1

缩进源代码表明您确实有一些范围问题。 calbck 函数是 click 处理函数私有的，因此对initial_timeout 函数不可见。要么让 calbck 成为顶级函数，要么让initial_timeout 成为点击处理函数的本地函数。

$('.slider-thumb').click(function() {
    var source = $(this).attr("src");
    $('#image_view').css('background-image',"url("+source+")");
    $('#image_view').slideDown(1000, calbck);
    initiate_timeout();

    function calbck(){}
});

function initiate_timeout(){
    var time_out = setTimeout(function() {
        $('#image_view').slideUp(1000, calbck);
        }, 2000);
}

Answer 2

您有一些 JS 错误和范围问题。为什么在尝试解决错误时会关闭调试？将您的代码更改为：

$('.slider-thumb').click(function(){
    var source = $(this).attr("src");
    $('#image_view').css('background-image',"url("+source+")");
    $('#image_view').slideDown(1000);
    setTimeout(function() {
        $('#image_view').slideUp(1000);
    },2000);  // will start 2 seconds after slideDown starts (which is 1 second after it completes)
});

或者更好的是，使用第一个动画的补全函数来设置定时器：

$('.slider-thumb').click(function(){
    var source = $(this).attr("src");
    $('#image_view').css('background-image',"url("+source+")");
    $('#image_view').slideDown(1000, setTimeout(function() {
        $('#image_view').slideUp(1000);
    },1000));  // will stay open for 1 second before sliding up again
});

或者，更好的是，使用 jQuery 的延迟/排队，您可以这样做：

$('.slider-thumb').click(function(){
    var source = $(this).attr("src");
    $('#image_view').css('background-image',"url("+source+")");
    $('#image_view').slideDown(1000).delay(1000).slideUp(1000);  // delay 1 sec between effects
});

您尝试传递给 slideUp 的 calbck 未在您使用它的范围内定义（在initiate_timout() 内）。它是您的点击处理程序私有的。

jQuery 可能比使用你自己的计时器有更好的链接效果的方法，但我看不出为什么如果它与你的 HTML 匹配，这段代码不应该工作。

注意：如果您的背景图片尚未预先缓存，它可能不会在您的 slideDown 启动时立即加载。

Answer 3

您是否遇到任何错误？您在setTimeout 函数中将未定义的值作为calbck 传递给slideUp。

它适用于我（与我修改后的组织）：http://jsfiddle.net/v3cjG/1/

当我运行您的确切代码 (http://jsfiddle.net/v3cjG/2/) 时，我收到“找不到变量 calbck”的错误——我说您在未定义的情况下传递的 var。