setTimeout 传参

http://blog.useasp.net/archive/2012/11/03/the-problem-when-setTimeout-invoke-a-function-with-an-object-parameter.aspx

javascript中setTimeout调用function时,传递参数的问题

在javascript中调用setTimeout的时候,如果我们是无参数的方法,调用相对简单,直接像下面这样调用就可以了

code

1

2

3

4

5

6

7

8

9

10

11

12

function fun(){

    // do something here.

}

// 第一个方法

setTimeout(fun(), 100);

// 第二个方法

setTimeout(fun, 100);

// 第三个方法

setTimeout("fun()", 100);

在有参数的时候,如果仅仅是字符串类型,也还好解决,第三种方法为我们提供了依据,可以像下面这样:

code

1

2

3

4

5

6

7

8

9

10

11

function fun1(p){

    // do something here;

}

// 注意这里有两个方法

// No.1:将参数写死,直接调用

setTimeout("fun1(‘parameters‘)", 100);

//No. 2: 在程序中如果要动态的调用,则可以使用组合参数的形式

setTimeout("fun1(‘" + paramenter + "‘)", 100);

//注意,这里需要单引号。

不过事情并非总是如此顺利,我们有的时候需要传递的是对象(这个需求越来越普遍了)。如果是按照这种传参的方式,结果将不可能是我们想要的。而直接像下面这样使用,你应该会发现,是行不通的:

code

1

2

3

4

5

6

7

8

function fun2(objectP){

    // do something here;

}

// 注意,这样是会报错的

// setTimeout(fun2(obj), 100);

// 在Chrome下面得到的错误是:Uncaught SyntaxError: Unexpected identifier,但是有的时候能运行<br>//这中情况对于在Chrome下的调试是非常的隐晦的。

// BTW:你可以试试在IE下面的报错是怎么样的~

为了能够顺利调用,我们要做一些工作,最简单直接的就是重写setTimeout了,霸王硬上弓:

code

1

2

3

4

5

6

7

8

9

10

11

12

13

14

function fun2(objectP){

    // do something here;

}

var $st = window.setTimeout;

// 这里覆盖了setTimeout方法,如果需要原始方法的时候,可以使用$st

window.setTimeout = function(funRef, delayTime) {

    if (typeof funRef === ‘function‘) {

        var args = Array.prototype.slice.call(arguments,2);

        var f = function(){ funRef.apply(null, args); }; // 返回无参数方法

        return $st(f, delayTime);//调用无参数方法

    }

    return $st(funRef,delayTime);

}

在代码中我们能看到,为了后继可以使用原生的setTimeout,我们不得不将setTimeout放入到变量中,这样就可以在有必要的时候调用了。这个方法最大的问题是对原生的setTimeout进行了覆盖,如果代码中原有调用了setTimeout,可能就会出现不必要的麻烦了。为此我们需要一种更简单,并且能够更加容易维护的方法。

分析这个方法,最根本就是让setTimeout调用个无参数的方法,因此,我们可以这样:

code

1

2

3

4

5

6

7

8

9

10

// 对方法进行改进

function fun2(objectP){

    return function(){

        // do something here;

        // do(objectP);

    }

}

// 调用

setTimeout(fun2(p), 100);

这样,就可以直接在setTimeout中调用了。这样就不会和现有的代码产生冲突,并且,在维护的时候,也能更加的方便。

时间: 2024-10-01 02:44:52

setTimeout 传参的相关文章

js SetTimeout传参问题

今天写代码遇到这样一个问题,先上代码 1 <!--JS方法--> 2 function textout(obj){ 3 if(opac==60){opac=0;return;}; 4 opac+=10; 5 if(document.all){ 6 obj.style.filter="alpha(opacity="+opac+")"; 7 } 8 else {obj.style.opacity=(opac/100);} 9 setTimeout('text

setTimeout传参

unction test(s) { alert(s); } window.setTimeout(function(){test('str');},1000); 这样就可以了...为什么是这样呢.因为setTimeout要求的第一个参数是函数...比如setTimeout(a_fun,1000)这样是可以的,a_fun是一个函数.但是setTimeout(a_fun(),1000);这样就不行了.因为这里a_fun()其实是函数的返回值了...这样讲应该能明白了.另外,不推荐网上有人用的方法set

setTimeout,setInterval回调传参

使用方式一: 标准浏览器与IE10都支持额外传参数,从第三个参数起,作为回调的参数传入.     var id = window.setTimeout(callback,10,1,2,4);     function callback(i,j,k){         alert(i+j+k);         clearTimeout(id);     }  //返回结果:7 ie6-ie9可以用以下代码模拟:(来自司徒正美的框架设计)  if(window.VBArray && !(do

手动访问和传参

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <div> <router-link to="/">首页</ro

438 vuex:基本使用,传参,vue和vuex的配合使用,Vue脚手架3,使用Vuex改版 TodoMVC,actions,mapGetters,mapMutations,mapActions

一 .Vuex的介绍 vuex 是什么? 状态管理工具 状态:即数据, 状态管理就是管理组件中的data数据 Vuex 中的状态管理工具, 采用了 集中式 方式统一管理项目中组件之间需要通讯的数据 [共享的数据.] [看图] 如何使用 最佳实践 : 只将组件之间共享的数据放在 vuex 中, 而不是将所有的数据都放在 vuex 中 也就是说: 如果数据只是在组件内部使用的, 这个数据应该放在组件中, 而不要放在 vuex vuex 中的数据也是 响应式 的, 也就是说: 如果一个组件中修改了 v

jQuery与django传参

Get方式传参 Django中的代码如下: urls.py代码: from django.conf.urls import url from django.contrib import admin import AjaxTest.views urlpatterns = [ url(r'^admin/', admin.site.urls), url(r"^index/$",AjaxTest.views.index), ] views.py代码: from django.http impo

spring jdbc传参及处理查询

传参有两种传参方式,一种直接传,一种通过对象传. 查询返回值,可以直接封进对象. public class springJdbcTest { private static JdbcTemplate jdbcTemplate; private static String uuid; @BeforeClass public static void init(){ ApplicationContext context = new ClassPathXmlApplicationContext("/spr

Azure sql database 监控存储过程的传参情况

背景 实施开发的同事找到我,反馈说项目中使用Azure sql database 之后,无法使用Profiler来监控自己开发的存储过程的参数传参情况.确实profiler这些实例级别的工具在Azure sql database下是不支持的,那我们有没有办法,变相实现监控参数情况,特写一篇博客记录一下. 测试环境 Microsoft SQL Azure (RTM) - 12.0.2000.8 Mar 30 2017 01:30:03 Copyright (C) 2016 Microsoft Co

webpack2使用ch4-向根目录index.html文件传参并使用参数 使用线上资源 压缩html

1 webpack.config.js const webpack = require('webpack'), htmlWebpackPlugin = require('html-webpack-plugin'), path = require('path'); module.exports = { entry: { main: './src/script/main.js', a: './src/script/a.js' }, output: { path: path.resolve(__dir