使用setTimeout来延迟jQuery动作的时间

Using setTimeout to delay timing of jQuery actions

本文关键字：时间 jQuery setTimeout 延迟 使用      更新时间：2023-09-26

我正在尝试延迟在div中交换文本。它应该像滑动条/旋转轮一样操作文本。

我一定是把代码写错了，因为最后的文本替换从来没有发生过。

另外，我该如何制作动画来引入替换文本(例如，百叶窗)?

<html>
    <head>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
        <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
        <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
        <script type="text/javascript">
$(document).ready(function() {
    $("#showDiv").click(function() {
        $('#theDiv').show(1000, function() {
            setTimeout(function() {
                $('#theDiv').html('Here is some replacement text', function() {
                    setTimeout(function() {
                        $('#theDiv').html('More replacement text goes here');
                    }, 2500);
                });
            }, 2500);
        });
    }); //click function ends
}); //END $(document).ready()
        </script>
    </head>
<body>
    Below me is a DIV called "theDiv".<br><br>
    <div id="theDiv" style="background-color:yellow;display:none;width:30%;margin:0 auto;">
        This text is inside the Div called "theDiv".
    </div><br>
    <br>
    <input type="button" id="showDiv" value="Show DIV">

</body>
</html>

.html()只接受字符串或函数作为参数，不能同时接受两者。试试这个:

 $("#showDiv").click(function () {
     $('#theDiv').show(1000, function () {
         setTimeout(function () {
             $('#theDiv').html(function () {
                 setTimeout(function () {
                     $('#theDiv').html('Here is some replacement text');
                 }, 0);
                 setTimeout(function () {
                     $('#theDiv').html('More replacement text goes here');
                 }, 2500);
             });
         }, 2500);
     });
 }); //click function ends
<<p> jsFiddle例子/strong>

试试这个:

function explode(){
  alert("Boom!");
}
setTimeout(explode, 2000);

你也可以使用jQuery的delay()方法代替setTimeout()。它会给你更多可读的代码。下面是文档中的一个示例:

$( "#foo" ).slideUp( 300 ).delay( 800 ).fadeIn( 400 );

唯一的限制(我知道)是，它没有给你一个方法来清除超时。如果您需要这样做，那么您最好坚持使用setTimeout强加给您的所有嵌套回调。

我是这样解决这个问题的鼠标离开后几秒钟菜单关闭(如果悬停没有触发)，

//Set timer switch
$setM_swith=0;
$(function(){
    $(".navbar-nav li a").click(function(event) {
        if (!$(this).parent().hasClass('dropdown'))
            $(".navbar-collapse").collapse('hide');
    });
    $(".navbar-collapse").mouseleave(function(){
        $setM_swith=1;
        setTimeout(function(){ 
           if($setM_swith==1) {
             $(".navbar-collapse").collapse('hide');
             $setM_swith=0;} 
        }, 3000);
    });
    $(".navbar-collapse").mouseover(function() {
        $setM_swith=0;
    });
 });
相关文章：