jQuery setTimeout()函数使用方法

所属分类: 网络编程 / JavaScript 阅读数: 791
收藏 0 赞 0 分享
setTimeout()
从载入后延迟指定的时间去执行一个表达式或者是函数;
仅执行一次 ;和window.clearTimeout一起使用.

我在

复制代码 代码如下:

$(document).ready(function(){
setTimout(test(),200);
function test()
{
alert(1);
}
});


只会执行一次,有朋友说可以使用

复制代码 代码如下:

setInterval ("showTime()", 5000);
function showTime()
{
    var today = new Date();
    alert("The time is: " + today.toString ());
}


但我调用下面方法也可以和setInterval一样哦

复制代码 代码如下:

<div id="div_debug"></div>
<script language="JavaScript">
//显示
function log(s){
    $('#div_debug').append(s+'<br>');
}
//以下是 setTimeout 在 jQuery 中的用法
function funA(){
    log('funA...');
    setTimeout('funA()', 1000);
}
jQuery(document).ready(function($){
    //用法1 : 把要调用的函数写在ready外面,使它成为全局函数
    funA();
    //用法2 : 直接写函数名,不能带括号也不能带引号,适合没有参数的函数
    function funB(){
        log('funB...');
        setTimeout(funB, 1000);
    }
    funB();
    //用法3 : 通过调用匿名函数来执行,适合有带参数的函数
    function funC(v){
        log('funC...'+v);
        setTimeout(function(){funC(v+1)}, 1000);
    }
    funC(1);
    //用法4 : 通过在jQuery命名空间上增加函数,调用起来更方便
    $.extend({
        funD:function(v){
            log('funD...'+v);
            setTimeout("$.funD("+(v+1)+")",1000);
        }
    });
    $.funD(101);
});
</script>


jQuery中setTimeout的几种使用方法

jQuery 中 setTimeout/setInterval 不能像在原生态 javascript 中那样使用, 否则会报错.

我们通过例子来说明一下jQuery中setTimeout的几种使用方法, 首先准备好测试用的DIV和公共函数:

复制代码 代码如下:

<div id="div_debug"></div>
<script src="http://www.studyday.net/demo/jquery.js"></script>
<script language="JavaScript">
functionlog(s){
$('#div_debug').append(s+'<br>');
}

//下文中测试用的代码可以放在这一行注释的下面,替换掉 //...
//...

</script>

原生态 javascript 中的 setTimeout 基本用法是像这样子的.

复制代码 代码如下:

//原生态 javascript 中的 setTimeout 基本用法
functionfunA(){
log('funA...');
setTimeout('funA()', 1000);
}
funA();


下面是jQuery中setTimeout的几种使用方法. 在线实例

复制代码 代码如下:

//jQuery 中的用法
functionfunA(){
log('funA...');
setTimeout('funA()', 1000);
}

jQuery(document).ready(function($){
//用法1 : 把要调用的函数写在ready外面,使它成为全局函数
funA();

//用法2 : 直接写函数名,不能带括号也不能带引号,适合没有参数的函数
functionfunB(){
log('funB...');
setTimeout(funB, 1000);
}
funB();

//用法3 : 通过调用匿名函数来执行,适合有带参数的函数
functionfunC(v){
log('funC...'+v);
setTimeout(function(){funC(v+1)}, 1000);
}
funC(1);

//用法4 : 通过在jQuery命名空间上增加函数,适用面更广
$.extend({
funD:function(v){
log('funD...'+v);
setTimeout("$.funD("+(v+1)+")",1000);
}
});
$.funD(100);
});


用法2和用法3的区别很明显, 但用法3和用法4的区别在哪里呢?为什么说用法4比用法3适用面更广呢?通过下面这个例子可以很直观的明白二者的区别:

复制代码 代码如下:

jQuery(document).ready(function($){
//用法3 : 通过调用匿名函数来执行,适合有带参数的函数
functionfunC(v){
log('funC...'+v);
setTimeout(function(){funC(v+1)}, 1000);
}

//用法4 : 通过在jQuery命名空间上增加函数,调用起来更方便
$.extend({
funD:function(v){
log('funD...'+v);
setTimeout("$.funD("+(v+1)+")",1000);
}
});
});

jQuery(document).ready(function($){
//funC(1); //去掉注释后执行这一句时会报错
$.funD(100); //这一句是正常的, 明白两者之间的区别了吧
});
更多精彩内容其他人还在看

JavaScript this关键字指向常用情况解析

这篇文章主要介绍了JavaScript this关键字指向常用情况解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
收藏 0 赞 0 分享

Vue-cli打包后如何本地查看的操作

这篇文章主要介绍了Vue-cli打包后如何本地查看的操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
收藏 0 赞 0 分享

vue cli 3.0通用打包配置代码,不分一二级目录

这篇文章主要介绍了vue cli 3.0通用打包配置代码,不分一二级目录,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
收藏 0 赞 0 分享

JavaScript事件循环及宏任务微任务原理解析

这篇文章主要介绍了JavaScript事件循环及宏任务微任务原理解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
收藏 0 赞 0 分享

关于vue-cli3打包代码后白屏的解决方案

这篇文章主要介绍了关于vue-cli3打包代码后白屏的解决方案,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
收藏 0 赞 0 分享

vue打包静态资源后显示空白及static文件路径报错的解决

这篇文章主要介绍了vue打包静态资源后显示空白及static文件路径报错的解决,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
收藏 0 赞 0 分享

vue-cli3访问public文件夹静态资源报错的解决方式

这篇文章主要介绍了vue-cli3访问public文件夹静态资源报错的解决方式,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
收藏 0 赞 0 分享

JS继承实现方法及优缺点详解

这篇文章主要介绍了JS继承实现方法及优缺点详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
收藏 0 赞 0 分享

vue或react项目生产环境去掉console.log的操作

这篇文章主要介绍了vue或react项目生产环境去掉console.log的操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
收藏 0 赞 0 分享

解决vue组件没显示,没起作用,没报错,但该显示的组件没显示问题

这篇文章主要介绍了解决vue组件没显示,没起作用,没报错,但该显示的组件没显示问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
收藏 0 赞 0 分享
查看更多