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. Ajax.BeginForm 使用过程中遇到的问题

    一.Ajax.BeginForm设置的路由在浏览器中解析不到. 问题截图:在视图中设置"Counter/Index",在浏览器中显示的是"action='/'" ...

  2. The Little Prince

    Chapter 1 That is why, at the age of six, I gave up what might have been a magnificant career as a p ...

  3. 浅谈JavaScript--函数重载

    个人认为重载就是一组具有相同名字.不同参数列表的函数(方法). 从语言角度来说,javascript不支持函数重载,不能够定义同样的函数然后通过编译器去根据不同的参数执行不同的函数. 但是javasc ...

  4. 发布一个npm包

    前言 我这里是写了一个vue轮播图插件,因此我使用了vue的脚手架工具创建一个项目,当然你也可以选择自己搭建脚手架. 本例中我会使用vue脚手架创建一个项目,并发布到npm上面去. 通过脚手架创建项目 ...

  5. 51nod1035(循环节)

    题目链接:https://www.51nod.com/onlineJudge/questionCode.html#!problemId=1035 题意:中文题诶- 思路:求满足 10^k=1(mod ...

  6. 清北刷题冲刺 10-28 a.m

    立方数 (cubic) Time Limit:1000ms   Memory Limit:128MB 题目描述 LYK定义了一个数叫“立方数”,若一个数可以被写作是一个正整数的3次方,则这个数就是立方 ...

  7. 快速搭建angular7 前端开发环境

    第一步:全局安装 Angular CLI (1)打开npm(终端)安装angular-cli 第二步:创造工作区和初始应用 (1)运行命令 ng new my-app 第三步:启动开发服务器 (1)c ...

  8. jmeter小问题解决方案合集

    问题1.在http请求,post的body中输入中文,显示乱码,怎么解决? 在jmeter的bin目录下,找到这个文件jmeter.properties,把jsyntaxtextarea.font.f ...

  9. LDAP--对某些AD属性值是字节数组byte[]情况的类型转换方法

    //BitConverter.ToBoolean((searchResult.Properties["mDBUseDefaults"][0] as byte[]), 0); row ...

  10. 【Unity3D】Unity3D中Material与ShareMaterial引用的区别

    我们在使用Unity引擎的时候,有时候需要去修改某个物体上的Material,在Unity的Renderer类里,提供了两个方法接口供我们使用. Renderer.material和Renderer. ...