JavaScript中setInterval函数应用常见问题之一(第一个参数不加引号与加引号的区别)
学过JavaScript 脚本语言的都应该接触过setInterval 函数.如何使用我想大家都知道,但是有时候对于刚刚接触JavaScript的朋友来讲,还是会在使用的时候碰到这样或那样的问题而感到困惑!以下是经常在QQ群中碰到问的最多的问题。如下图:

首先声明:本人JavaScript技术水平较低,以下所诉完全是依照自己的理解来做一些说明。如果有不当之处,还请批评斧正!以下就全当是在扯蛋吧,扯的很显浅,
扯深了自己搞不定,还会扯疼的!
在JavaScript中的setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式。setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数来将其停止。
其实以上对函数的调用均能执行。首先我们看以下代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
function fun() {
alert(1);
}
setInterval("fun()",1000);//全局作用域下正常执行
setInterval(fun(),1000); //调用函数正常,setInterval调用出错
setInterval(fun,1000); //正确
</script>
</head>
<body> </body>
</html>
我所写的代码和提问题的人是相同的,唯一的区别就是函数名不同罢了!如果大家做了相关测试都应该知道,就以上代码来说都会弹出结果1.
当然以上代码其执行环境为全局。setInterval 第一个参数 可以是函数名、匿名函数、函数的引用以及其他可执行代码。(个人理解)
setInterval("fun()",1000);
其中这种加引号的调用就可以理解为“可执行代码” ,就行eval 一样去执行。第一个参数,就是对fun方法的调用 。理所当然的弹出 1 。 一秒钟间隔,一直执行。
setInterval(fun(),1000);
对于这种调用方式我不理解使用者用setInterval 的意图为何.
fun() 是对函数的直接调用。也就是说当setInterval还没有开始执行,函数fun就执行了。如果这个函数没有返回值或者返回值不是可执行的函数或者其他的代码的话,就以上代码而言只是弹出1,之后就遍报错了.
难道这样的调用真的不可以吗?其实是可以的!例如代码:
function funone() {
return function () {
alert("qishiwoyenengzhixing");
}
}
setInterval(funone(), 1000); //每隔一秒钟都会弹出 qishiwoyenengzhixing 你信不信,反正我信了
就我个人认为这种设计或者调用完全没有任何意义。在此只做一下简单的说明吧!
setInterval(fun,1000); //这种方法是正确的。
大家可以把这种调用setInterval的方式的第一个参数看作参数为 函数名或函数的引用。当然还可以直接使用匿名函数,如:
setInterval(function () {
alert(</span>"我一秒中执行一次"<span style="color: #000000;">);
}, </span>1000);</pre>
有些人刚接触JavaScript可能发现,在全局作用域下 setInterval("fun()",1000); 可以正常执行,但放到window.onload函数中却不能执行。为什么呢?(其实一开始我也碰到了相同的问题)
代码如下:
window.onload = function () {
function fun() {
alert(1);
}
setInterval("fun()",1000);//这个报错了 未定义 重点在这一个
// setInterval(fun(), 1000); //这个和刚才全局的表现一样
// setInterval(fun,1000);//这个没有问题
};
setInterval("fun()",1000); 这种调用报未定义,在全局讲解中我们已经说过了 。可以把带引号的参数理解为 “可执行代码” ,
而setInterval现在把以引号包括的“可执行代码进行”处理。就像eval一样给予执行。其在执行中 fun() 执行环境发生了变化,不是在window.onload方法下,而是在全局执行环境中也就是window.大家应该知道JavaScript存在作用域链,由内向外依次查找。内部可以访问其上层的函数和变量,而外部却不能访问内部的函数和变量。JavaScript有一个预编译处理,首先对函数和变量进行预编译。也就是说其函数和变量作用域是在其声明的时候确定的,而不是在执行的时候确定。当setInterval把"fun()"执行环境换为全局的后,对fun的调用是无效的。因为全局不能这样访问局部的函数和变量。window.onload相对于window来说就是局部的。其实就是一个作用域的问题。
对于setInterval(fun(), 1000)和setInterval(fun,1000)的调用其执行环境并没有改变,所以是可以访问的到的window.onload下声明的函数。只不过setInterval(fun(), 1000)执行fun函数后 会报错的,setInterval其调用错误。为什么错误?在之前已经讲过了,这里就不啰嗦了!
为了证明自己的的理解为第一个参数加引号 以“可执行代码” 执行。以下是自己写的两段代码进行的测试:
function fun1() {
alert(1);
}
setInterval("alert(fun1)",2000);//你认为结果是多少?
setInterval("var a=1;var b=2;c=a+b;alert(c);",1000); //这个呢?
以上内容是个人的理解,因为自己在之前也碰到了相同的问题!也许仅仅对于刚学JavaScript的朋友有一点帮助。当然可能存在错误(包括错别字),欢迎各位大牛批评斧正!。如果你有意帮助本人提高,请留下你宝贵的建议。请不要因此进行谩骂(其实完全可以把此作为一个笑话)!谢谢!
原文:https://www.cnblogs.com/bluescreen/archive/2013/05/19/3086399.html?utm_source=tuicool
JavaScript中setInterval函数应用常见问题之一(第一个参数不加引号与加引号的区别)的更多相关文章
- JavaScript正则表达式详解(二)JavaScript中正则表达式函数详解
二.JavaScript中正则表达式函数详解(exec, test, match, replace, search, split) 1.使用正则表达式的方法去匹配查找字符串 1.1. exec方法详解 ...
- Javascript中call函数和apply函数的使用
Javascript 中call函数和apply的使用: Javascript中的call函数和apply函数是对执行上下文进行切换,是将一个函数从当前执行的上下文切换到另一个对象中执行,例如: so ...
- Javascript中的函数(Function)与对象(Object)的关系
今天我们来尝试理解Function和Object.因为这个里面有些人前期可能会搞糊涂.他们之间到底是什么关系.当然也不除外当初的我. 注意:官方定义: 在Javascript中,每一个函数实际上都是一 ...
- 浅析 JavaScript 中的 函数 currying 柯里化
原文:浅析 JavaScript 中的 函数 currying 柯里化 何为Curry化/柯里化? curry化来源与数学家 Haskell Curry的名字 (编程语言 Haskell也是以他的名字 ...
- 谈谈javascript 中的函数问题
聊聊javascript中的函数 本文可作为李刚<疯狂htmlcssjavas讲义>的学习笔记 先说一个题外话 前几天在知乎上流传着一个对联 上联是雷锋推到雷峰塔 nnd 这是什么对联? ...
- 浅析 JavaScript 中的 函数 uncurrying 反柯里化
柯里化 柯里化又称部分求值,其含义是给函数分步传递参数,每次传递参数后部分应用参数,并返回一个更具体的函数接受剩下的参数,这中间可嵌套多层这样的接受部分参数函数,直至返回最后结果. 因此柯里化的过程是 ...
- Javascript中的函数(三)
一:概述 函数是进行模块化程序设计的基础,编写复杂的Ajax应用程序,必须对函数有更深入的了解.JavaScript中的函数不同于其他的语言,每个函数都是作为一个对象被维护和运行的.通过函数对象的性质 ...
- java基础62 JavaScript中的函数(网页知识)
1.JavaScript中,函数的格式 function 函数名(形参列表){ 函数体; } 2.JavaScript中,函数需要注意的细节 1.在javaScript中,函数定义形参时,是不能使用v ...
- Javascript中的函数数学运算
1.Math函数与属性使用语法 Math.方法名(参数1,参数2,...); Math.属性; 说明 Math函数可以没有参数,比如Math.random()函数,或有多个参数,比如Math.max( ...
随机推荐
- 工具系列 | Docker基本概念
1.什么是docker? Docker 是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的镜像中,然后发布到任何流行的 Linux或Windows 机器上,也可以实现虚拟化. ...
- IfcCircle
An IfcCircle is a curve consisting of a set of points having equal distance from the center. NOTE A ...
- 百度网盘快速下载工具下载:Pandownload下载
众所周知的百度网盘下载限速很厉害,所以就有了快速下载工具出现了.一般情况下,按照家里网速有多快,使用工具下载就有多快. 可以直接复制如下图进行下载: 另外,PanDownload[百度网盘下载工具]无 ...
- [转] 2017年PHP开发者大会 鸟哥 (惠新宸@Laruence)精彩问答
php7.1那个诡异的函数返回类型限定是如何考虑的? 鸟哥:没什么特别考虑,投票投出来的.首先说明一点,我投的是反对票.包括php的命名空间反斜杠我也是非常反对的,但可能由于我并没有对这方面太深的认识 ...
- html5 video标签播放视频流
从文件服务器读取音视频文件,以流的方式传给前台,并能够播放视频. 做了一个demo,用html5的video,audio标签实现. 后台实现代码: @GetMapping(value = " ...
- Nginx - 安装并启动Nginx
1 - 安装Nginx 官网步骤:http://nginx.org/en/linux_packages.html#RHEL-CentOS [Anliven@h202 ~]$ sudo vim /etc ...
- .NET Core开源Quartz.Net作业调度框架实战演练
一.需求背景 人生苦短,我用.NET Core!作为一枚后端.NET开发人员,项目实践常遇到定时Job任务的工作,在Windows平台最容易想到的的思路Windows Service服务应用程序,而在 ...
- 小甲鱼汇编语言学习笔记——day01
1.计算机CPU由如下三部分组成(如下图):运算器.控制器.寄存器. 2.寄存器:简单说,就是用来存储数据的器件,类似内存,不过这个是CPU专用,跟内存不一样. 8086CPU里,寄存器总共有14个, ...
- pyhthon Opencv截取视频中的图片
import os import cv2 ##加载OpenCV模块 def video2frames(pathIn='', pathOut='', imgname='', only_output_vi ...
- openjudge4979 - 海贼王之伟大航路 题解
原题链接 题目简要分析 N个点,从1号点到N号点求最短路径,且每个点都要遍历到.现在要你求出最优方案. 这道题看到后,首先的想法莫过于搜索.暴力了.这显然不太可能.而进一步思考,使用Floyed和Di ...