Question

我有一个在点击事件上调用的函数来隐藏叠加层。这会调用jQuery fadeOut方法，时间为750 - 见下文。

function Hide_Site_Overlay() {
    $('#site_overlay,#site_overlay_background').fadeOut(750, function(){
        //do other stuff
    });
}

但是，在点击事件处理程序中，我跟随另一个人 - 例如

onclick="Hide_Site_Overlay(); Show_Next_Overlay();"

如何确保代码在节目开始前等待隐藏完成？

Answer 1

将第二个函数提供给第一个函数作为fadeOut完成时要执行的回调。试试这个：

<a href="#" onclick="Hide_Site_Overlay(Show_Next_Overlay);">Foo</a>

function Hide_Site_Overlay(callback) {
    $('#site_overlay,#site_overlay_background').fadeOut(750, function(){
        //do other stuff

        callback && callback(); // only make the callback if one was provided
    });
}

或者，更好的是，从HTML中删除过时且丑陋的onclick属性并使用JS来连接您的事件：

<a href="#" class="overlay-control">Foo</a>

$('.overlay-control').click(function() {
    Hide_Site_Overlay(Show_Next_Overlay);
});

如果回调函数具有属性，则只需在调用中提供它们：

callback && callback(2, 'divLoginOverlay');

Answer 2

一种解决方案是将From: preg_match_all("~((.+?))~", $string, $m); To: preg_match_all("~$(.+?)$~", $string, $m);调用移至Show_Next_Overlay()函数。示例代码：

Hide_Site_Overlay

否则你可以改变function Hide_Site_Overlay() { $('#site_overlay,#site_overlay_background').fadeOut(750, function(){ //do other stuff Show_Next_Overlay(); }); }函数，所以它需要一个回调作为参数，并在fadeOut完成时执行它。示例代码：

Hide_Site_Overlay

您还可以使用function Hide_Site_Overlay(callback) { $('#site_overlay,#site_overlay_background').fadeOut(750, function(){ //do other stuff if (typeof callback == "function") callback(); }); }功能，例如：

setTimeout

仅当fadeOut在jQuery中完成时才退出函数

2 个答案: