您现在的位置: 365建站网 > 365学习 > JS/javascript中setInterval、setTimeout不能传递带参数函数的解决方法

JS/javascript中setInterval、setTimeout不能传递带参数函数的解决方法

文章来源:365jz.com     点击数:183    更新时间:2017-12-23 20:32   参与评论
JavaScript的setInterval()函数用于设定每隔指定的时间就执行对应的函数或代码。

该函数属于全局对象window。

语法

setInterval()函数的语法如下:

setInterval ( code, milliseconds[, args...] )

参数

code 需要执行的函数或js代码
milliseconds 执行函数或代码的间隔时间,单位为毫秒
args 可选参数用于给被调用的函数传递参数,参数可以有多个

在JS/javascript中无论是setTimeout还是setInterval,在使用函数名作为调用句柄时都不能带参数,而在许多场合必须要带参数,
这就需要想方法解决。
一、采用字符串形式:——(缺陷)参数不能被周期性改变
setInterval("foo(id)",1000);
二、匿名函数包装 (推荐)
 
window.setInterval(function() 
{ 
foo (id); 
}, 1000); 

这样就可以周期性执行foo(id)这个函数,而且把变量id传递进去;
三、定义返回无参函数的函数
 
function foo(id) 
{ 
alert(id); 
} 
function _foo(id) 
{ 
return function() 
{ 
foo(id); 
} 
} 
window.setInterval(_foo(id),1000); 

这里定义了一个函数_foo,用于接收一个参数,并返回一个不带参数的函数,在这个函数内部使用了外部函数的参数,从而对其调用,不需要使用参数。
在 window. setInterval函数中,使用_foo(id)来返回一个不带参数的函数句柄,从而实现了参数传递的功能。
四、修改setInterval
 
function foo(id) 
{ 
alert(id); 
} 
var _sto = setInterval; 
window.setInterval = function(callback,timeout,param) 
{ 
var args = Array.prototype.slice.call(arguments,2); 
var _cb = function() 
{ 
callback.apply(null,args); 
} 
_sto(_cb,timeout); 
} 
window.setInterval(hello,3000,userName); 

以上的所有方法也适合setTimeout。

jQuery中setInterval()方法:

定义和用法:

setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式。

setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。

var time=0;

用法1:

function jump(){
  …………  //函数内容
}
time = setInterval("jump",5000); //每个五秒调用一次函数

当需要暂停的时候

  $("").hover(function(){
    clearInterval(time),function(){
    time = setInterval("jump",5000); 
    }  
  })

用法2:

function autoPlay(){
  time = setInterval(function(){
    …………   //函数内容
  },5000);
}
autoPlay();  //调用函数

当需要暂停时

   $("").hover(function(){
    clearInterval(time),function(){
    autoPlay();
    }  
  })

总结:

第一种用法思路比较清晰,先设置一个函数,在通过setInterval来自行调用,但是将其在别处调用比较困难;

第二种方法看起来比较乱,在setInterval内部写下自行调用的函数,然后在给他套上一个有名函数,然后通过调用有名函数来实行自动,在别处调用比较方便。

以上纯属个人看法,希望大神们多多指点。

如对本文有疑问,请提交到交流论坛,广大热心网友会为你解答!! 点击进入论坛


发表评论 (183人查看0条评论)
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
用户名: 验证码: 点击我更换图片
最新评论
------分隔线----------------------------