js setTimeout函数
最近在看JS DOM编程艺术,在第十章的动画里面有个setTimeout函数的例子中涉及了很多的引号,研究了好大一会才看明白,综合网上各个大神的解释和自己的理解,其原理是这样的:
首先看下程序源代码:
function moveElement(elementID,final_X,final_Y,interval){
if(!document.getElementById) return false;
if(!document.getElementById(elementID)) return false;
var elem = document.getElementById(elementID);
var xpos = parseInt(elem.style.left);
var ypos = parseInt(elem.style.top);
if (xpos==final_X && ypos==final_Y){
return true;
}
if(xpos<final_X){
xpos++;
}
if(xpos>final_X){
xpos--;
}
if(ypos<final_Y){
ypos++;
}
if(ypos>final_Y){
ypos--;
}
elem.style.left = xpos +"px";
elem.style.top = ypos +"px";
var repeat = "moveElement('"+elementID+"',"+final_X+","+final_Y+","+interval+")";
moveMent = setTimeout(repeat,interval);
}
这段代码的功能是通过elementID获得元素每隔interval的时间移动元素的位置至final_X,final_Y。
为了使函数能够一直执行到最终位置需要调用setTimeout来循环执行,可能很多初学者像我一样卡在了repeat变量这里。我们首先看setTimeout(code,millisec),其中code可以为字符串或者函数,在本例中作者采用了字符串的形式来传值。如果我们相用字符串的话需要将变量 elementID final_X final_Y interval 和其他的常量一起拼起来做成如下的效果:
setTimeout(moveElement('elementID',final_X,final_Y,interval),interval).
也就是说setTimeout 里面的repeat = moveElement('elementID',final_X,final_Y,interval) 那么拼接前是这样的:
moveElement('
elementID
',
final_X
,
final_Y
,
interval
)
字符串的拼接只需要在每个字符上面加上双引号就行了 最终就是: repeat = "moveElement('"+elementID+"',"+final_X+","+final_Y+","+interval+")";
特别注意不要把 "" 给弄混掉了。 另外如果直接传给setTimeout变量函数的话是这样的:
repeat = function(){moveElement(elementID,final_X,final_Y,interval)};
这样更容易读一些,效果也完全一样。
js setTimeout函数的更多相关文章
- js setTimeout 传递带参数的函数的2种方式
js setTimeout 传递带参数的函数的2种方式 Created by Marydon on 2018年9月14日 1.准备工作 function sayYourName(param) { ...
- JS中的setTimeout()函数
1.setTimeout() 方法 setTimeout() 方法用于在指定的毫秒数后调用函数或执行表达式.返回一个 ID(数字),可以将这个ID传递给 clearTimeout() 来取消执行. s ...
- js setTimeout运用
js setTimeout运用 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "ht ...
- js:setTimeout 与 setInterval 比较
在javascript中有两个非常有用的函数:setTimeout 和setInterval ,都是定时器:但是两者存在着一些区别: 1. setTimeout函数 用法:setTimeout(fn, ...
- 浅谈setTimeout函数和setInterval函数
前几天学了js,看到了两个非常有趣的函数,他们分别是setTimeout函数和setInterval函数,这两个函数能使网页呈现非常一些网页中比较常见的效果,比如说图片轮播,等一些非常好玩的效果.下面 ...
- [概念] js的函数节流和throttle和debounce详解
js的函数节流和throttle和debounce详解:同样是实现了一个功能,可能有的效率高,有的效率低,这种现象在高耗能的执行过程中区分就比较明显.本章节一个比较常用的提高性能的方式,通常叫做&qu ...
- C# dll 事件执行 js 回调函数
C# dll 事件执行 js 回调函数 前言: 由于js 远程请求 XMLHttpRequest() 不支持多线程,所以用C# 写了个dll 多线程远程抓住供js调用. 最初代码为: C#代 ...
- js倒计时函数和(js禁用和恢复a标签的操作)
<script type="text/javascript"> /*获取手机号*/ var start_time=60; function get_phone_nums ...
- JS异步函数 返回值
1. js 异步的几种情况 : 1.1 异步操作由浏览器内核的 webcore 来执行: onclick 由浏览器内核的 DOM Binding 模块来处理,当事件触发的时候,回调函数会立即添加到任 ...
随机推荐
- 原生JS---5
原生js学习笔记5——BOM操作 什么是BOM BOM:Browser Object Model 是浏览器对象模型,浏览器对象模型提供了独立与内容的.可以与浏览器窗口进行互动的对象结构,BOM由多个对 ...
- 【专题】概率期望DP
11.22:保持更新状态:主要发一些相关的题目和个人理解 (P.S.如果觉得简单,可以直接看后面的题目) upd 11.30 更完了 [NO.1] UVA12230 Crossing Rivers ...
- 树形$dp$学习笔记
今天学习了树形\(dp\),一开始浏览各大\(blog\),发现都\(TM\)是题,连个入门的\(blog\)都没有,体验极差.所以我立志要写一篇可以让初学树形\(dp\)的童鞋快速入门. 树形\(d ...
- IP地址库
吐槽 前两天一个线上的IP地址库除了点幺蛾子,一查代码,发现用的库早就不更新了,遂决定换库,有几个方案: 纯真数据库 IPIP数据库 GeoIP 纯真数据库是大码农的福音,免费,但是精度一般:IPIP ...
- 数据连接类 这里采用mysql
数据库通用操作类,自己参照几个通用类改写的,用起来还是蛮不错.... 这里用的mysql 要是其他数据库自行更改下就好 public class MySqlHelper { public stati ...
- 树莓派-解决apt-get upgrade速度慢的方法[更换阿里云源]
执行 apt-get upgrade 遇到速度慢的原因: 使用国外软件源 解决方法也很简单,将源换为国内环境即可,我选择阿里云 步骤 1.备份为 sources.list sudo cp /etc/a ...
- windows服务安装错误 在‘安装’过程发生异常:System.ComponentModel.Win32Exception:系统正在关机
今天安装windows服务的时候先是在本地安装测试通过,但是一到服务器就一直安装失败 在‘安装’过程发生异常:System.ComponentModel.Win32Exception:系统正在关机 然 ...
- 在PL/SQL中使用游标、动态sql和绑定变量的小例子
需求:查询并输出30号部门的雇员信息 方式一:使用 loop...fetch SET serveroutput ON; DECLARE CURSOR c_emp IS ; v_emp emp%rowt ...
- Unity引擎GUI之Text
Text 文本 要显示的字符串. Font 字体 Font Style 加粗与倾斜 Font Size 字体大小 Line Spacing 行距,文本行之间的间距 Rich Text 勾选后,想要单独 ...
- ajax 三级联动写法
主页面代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...