DOM编程艺术一个小demo,看到这里的时候不理解

"moveElement('"+elementID+"',"+final_x+","+final_y+","+interval+")"

这么多引号一下就看蒙圈了

function moveElement(elementID,final_x,final_y,interval) {
if (!document.getElementById) return false;
if (!document.getElementById(elementID)) return false;
var elem = document.getElementById(elementID);
if(elem.movement){
clearTimeout(ele.movement)
}
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+")";
elem.movement = setTimeout(repeat,interval);
}

其中 var repeat = "moveElement('"+elementID+"',"+final_x+","+final_y+","+interval+")";这段代码研究了很久,现在分析明白了

因为setTimeout的第一个参数是一个字符串,所以repeat是一个字符串,+ 代表链接字符串,双引号里面的单引号是加在elementID这个参数上的,因为getElementById的参数是要带引号的。
还有一个问题是

elem.movement = setTimeout(repeat,interval);

为什么把setTimeOut赋值给对象的属性,不直接赋值给全局变量或局部变量,感觉这部分书里面讲的有点模糊,看了还是没明白,查了一下资料

1、如果使用全局变量,当有多个元素需要运动的时候,就需要声明多个变量来存放这些元素对应的定时器;

2、使用局部变量虽然不需要声明多个变量,但是有时候需要在外部判断一个元素是否正在运动,由于在函数外部访问不到该函数内的变量,从而无法拿到该元素对应的定时器值;

3、将定时器挂载在元素的自定义属性上就可以在任何地方都能拿到该定时器的值,从而知道该元素是否在运动;

DOM编程艺术-setTimeout,"moveElement('"+elementID+"',"+final_x+","+final_y+","+interval+")"的更多相关文章

  1. JavaScript DOM 编程艺术·setInterval与setTimeout的动画实现解析

    先贴上moveElement()函数的大纲,为了方便观看,删了部分代码,完整版粘到文章后面. function moveElement(elementID,final_x,final_y,interv ...

  2. JavaScript DOM 编程艺术

    最近把JavaScript DOM 编程艺术这本书看完了,觉得这本书很好 深入浅出地展示了渐进增强.平稳退化.结构和样式分离等编程思想,我对书中重要的知识进行了梳理总结. 一.网页 二.JavaScr ...

  3. 《JavaScript DOM编程艺术(第二版)》读书总结

    这本书是一本很基础的书,但对于刚入前端不久的我来说是一本不错的书,收获还是很大的,对一些基础的东西理解得更加透彻了. 1.DOM即document object model的缩写,文档对象模型,Jav ...

  4. 【JavaScript DOM编程艺术(第二版)】笔记

    第1章 javascript简史 1.什么是DOM? 简单的说,DOM是一套对文档的内容进行抽象和概念化的方法.\         第2章 javascript语法 1.内建对象: 内建在javasc ...

  5. JavaScript DOM编程艺术 读书笔记

    2. JavaScript语法 2.1 注释      HTML允许使用"<!--"注释跨越多个行,但JavaScript要求这种注释的每行都必须在开头加上"< ...

  6. 读js DOM编程艺术总结

    第一章主要介绍一些历史性问题,javascript是Netcape和sun公司合作开发的. 第二章JavaScript语法: 1,数据类型:(弱类型)字符串,数值,布尔值(只有true和false,不 ...

  7. JavaScript DOM编程艺术读书笔记(四)

    第十章 实现动画效果 var repeat = "moveElement('"+elementID+"',"+final_x+","+fin ...

  8. Javascript DOM编程艺术JS代码

    //com function addLoadEvent (func) { var oldonload = window.onload; if (typeof window.onload != 'fun ...

  9. dom编程艺术章12

    function addLoadEvent(func){//添加事件函数 var oldonload = window.onload; if(typeof window.onload != 'func ...

随机推荐

  1. 读《JavaScript权威指南》笔记(一)

    1.Number()  parseInt()  parseFloat() 如果通过Number()转换函数传入一个字符串,它会试图将其转换为一个整数或浮点数直接量,这个方法只能基于十进制数进行转换,并 ...

  2. 洛谷P1083 借教室

    P1083 借教室 题目描述 在大学期间,经常需要租借教室.大到院系举办活动,小到学习小组自习讨论,都需要向学校申请借教室.教室的大小功能不同,借教室人的身份不同,借教室的手续也不一样. 面对海量租借 ...

  3. AngularJs详细

    正经的来啦 (MVC) View(视图), 即 HTML. Model(模型), 当前视图中可用的数据. Controller(控制器), 即 JavaScript 函数,可以添加或修改属性. 修改了 ...

  4. Java Script 第一章.

    什么是Java script? JavaScript是一种基于对象的脚本语言,用于开发基于客户端和基于服务器的Internet应用程序 JavaScript是一种脚本语言(脚本语言是一种轻量级的编程语 ...

  5. Jmeter常用线程组设置及场景运行时间计算

    Jmeter中通过线程组来模拟大用户并发场景,今天主要介绍三个常用的线程组,帮助我们设计更加完善的测试场景,另外介绍下场景执行时间如何计算. 一.Thread Group 取样器错误后要执行的动作   ...

  6. putty提示Network error:Software caused connection abort

    在 sshd host 的 /etc/ssh/sshd_config 设定: TCPKeepAlive yes,和将LoginGraceTime的值设为0,默认为2m,然后使用service sshd ...

  7. zabbix对tcp状态监控

    1.先编写一个获取tcp状态的脚本文件,脚本放在/usr/lib/zabbix/alertscripts/vim /usr/lib/zabbix/alertscripts/tcp_status.sh ...

  8. P1089津津的储蓄计划

    题目描述 津津的零花钱一直都是自己管理.每个月的月初妈妈给津津300300元钱,津津会预算这个月的花销,并且总能做到实际花销和预算的相同. 为了让津津学习如何储蓄,妈妈提出,津津可以随时把整百的钱存在 ...

  9. 1101 Quick Sort(25 分

    There is a classical process named partition in the famous quick sort algorithm. In this process we ...

  10. Django2.0里model外键和一对一的on_delete参数

    在django2.0后,定义外键和一对一关系的时候需要加on_delete选项,此参数为了避免两个表里的数据不一致问题,不然会报错: TypeError: __init__() missing 1 r ...