189 8069 5689
一个动画实现的函数。
创新互联建站专注于企业成都营销网站建设、网站重做改版、鹿城网站定制设计、自适应品牌网站建设、H5高端网站建设、商城网站建设、集团公司官网建设、外贸营销网站建设、高端网站制作、响应式网页设计等建站业务，价格优惠性价比高，为鹿城等各大城市提供网站开发制作服务。
参数：elementID = 动画元素的ID
final_x = 动画结束x坐标
final_y = 动画结束y坐标
interval = 动画间隔时间
if (elem.movement) {
clearTimeout(elem.movement);
}
// 如果计时器已声明，就是动画已经开始递归执行，则清除之前的计时器
if (xpos == final_x ypos == final_y) {
return true;
}// 如果已到达指定结束位置，停止执行
if (xpos final_x) {
var dist = Math.ceil((final_x - xpos)/15);
xpos = xpos + dist;
}// 没有到达指定位置时，获取移动的x速度，15分之一并取整
if (xpos final_x) {
var dist = Math.ceil((xpos - final_x)/15);
xpos = xpos - dist;
}// 同上
if (ypos final_y) {
var dist = Math.ceil((final_y - ypos)/15);
ypos = ypos + dist;
}// 同上
if (ypos final_y) {
var dist = Math.ceil((ypos - final_y)/15);
ypos = ypos - dist;
}// 同上
elem.style.left = xpos + "px";// 移动
elem.style.top = ypos + "px";// 移动
// 递归函数
var repeat = "moveElement('"+elementID+"',"+final_x+","+final_y+","+interval+")";
elem.movement = setTimeout(repeat,interval);
主要作用应该是：做出网页的特效和美化页面...... 一个最简单的函数： HTML HEAD TITLE New Document /TITLE SCRIPT LANGUAGE="JavaScript" !-- function showColor(col) { document.bgColor=col; } //-- /SCRIPT /HEAD BODY bgcolor="green" center FORM METHOD=POST ACTION="" input type="button" value="不许碰我" onclick="showColor('red')" input type="button" value="警告你别碰我"onclick="showColor('blue')" input type="button" value="给你点颜色看"onclick="showColor('yellow')" /FORM /center /BODY /HTML 看一下........
首先不是“在for循环中 i 是取不到值得吗？ 只有在循环结束后 i=3，i才被赋值”
而是“在for循环当中，i会变化，但是inner函数当中的i值并没有被立即调用”
这个和js的执行顺序有关系，i值会在for循环执行的时候不断变化，当调用计时器的时候，i值已经是3了
这个是典型的闭包问题，涉及到作用域的相关知识（在函数inner当中并没有i这个变量，变量是位于func这个函数当中的，此时，在调用inner的时候，要寻找i这个变量存储空间，找不到所以向父级查找，父级func当中有i，由于for循环已经执行完毕，i值已经被设置成了3，所以~自然是打出3的），建议你先了解一下作用域，另外也了解一下计时器，关于计时器的类似的一道题-JavaScript计时器
1：调用关键字function来构造
function distance(x1,x2,y1,y2)
{
var dx=x2-x1;
var dy=y2-y1;
return Math.sqrt(dx*dx+dy*dy);
}
2：使用Function()构造函数（请注意与上面的大小写）
var f=new Function*"x","y","return x*y");
这行代码创建了一个新函数，该函数和你所熟悉的语法定义的函数基本上时等价的:
function f(x,y)
{
return x*y;
}
Functino()构造函数可以接受任意多个字符串参数。它的最后一个参数时函数的主体，其中可以包含任何JavaScript语句，语句之间用分号分隔。其他的参数都是用来说明函数要定义的形式参数名的字符串。如果你定义的函数没有参数，那么可以只需给构造函数传递一个字符串（即函数的主体）即可。
注意，传递给构造函数Function()的参数中没有一个用于说明它要创建的函数名。用Function()构造函数创建的未命名函数有时被成为“匿名函数”。
你可能非常想知道Function()构造函数的用途是什么。为什么不能只用function语句来定义所有的函数呢？原因是Function()构造函数允许我们动态地建立和编译一个函数，它不会将我们限制在function语句预编译的函数体中。这样做带来的负面影响效应就是每次调用一个函数时，Function()构造函数都要对它进行编译。因此，在循环体中或者在经常使用的函数中，我们不应该频繁地调用这个构造函数。
使用Function()构造函数的另一个原因是它能够将函数定义为JavaScript表达式的一部分，而不是将其定义一个语句，这种情况下使用它就显得比较的方面，甚至可以说精致。
3：函数直接量
函数直接量是一个表达式，它可以定义匿名函数。函数直接量的语法和function语句非常相似，只不过它被用作表达式，而不是用作语句，而且也无需指定函数名。下面的三行代码分别使用function()语句、Funciont()构造函数和函数直接量定义了三个基本上相同的函数：
function f(x){return x*x};
var f=new Function("x","return x*x;");
var f=function(x){reurn x*x};
在JavaScript1.1中，可以使用构造函数Function()来定义函数，在JavaScript1.2和其后的版本中，还可以使用函数直接量来构造函数。你应该注意这两种方法之间的重要差别。
首先，构造函数Function()允许在运行时动态地创建和编译JavaScript代码。但是函数直接量却是函数结构的一个静态部分，就像function语句一样。
其次，作为第一个差别的必然结果，每次调用构造函数Function()时都会解析函数体并且创建一个新东汉数对象。如果对构造函数的调用出现在一个循环中，或者出现在一个经常被调用的函数中，这种方法的效率非常低。另一个方面，函数直接量或出现在循环和函数中的嵌套函数不是在每次调用时都被重新编译，而且每当遇到一个函数直接量时也不创建一个新的函数对象。
Function()构造函数和函数之间量之间的第三点差别是，使用构造函数Function()创建的函数不使用词法作用域，相反的，它们总是被当作顶级函数来编译，就像下面代码所说明的那样：
function Math(){};
Math.prototype=new Object();
/**
* Property E
* @memberOf Math
* @since Standard ECMA-262 3rd. Edition
* @since Level 2 Document Object Model Core Definition.
*/
Math.E=0;
/**
* Property LN10
* @memberOf Math
* @since Standard ECMA-262 3rd. Edition
* @since Level 2 Document Object Model Core Definition.
*/
Math.LN10=0;
/**
* Property LN2
* @memberOf Math
* @since Standard ECMA-262 3rd. Edition
* @since Level 2 Document Object Model Core Definition.
*/
Math.LN2=0;
/**
* Property LOG2E
* @memberOf Math
* @since Standard ECMA-262 3rd. Edition
* @since Level 2 Document Object Model Core Definition.
*/
Math.LOG2E=0;
/**
* Property LOG10E
* @memberOf Math
* @since Standard ECMA-262 3rd. Edition
* @since Level 2 Document Object Model Core Definition.
*/
Math.LOG10E=0;
/**
* Property PI
* @memberOf Math
* @since Standard ECMA-262 3rd. Edition
* @since Level 2 Document Object Model Core Definition.
*/
Math.PI=0;
/**
* Property SQRT1_2
* @memberOf Math
* @since Standard ECMA-262 3rd. Edition
* @since Level 2 Document Object Model Core Definition.
*/
Math.SQRT1_2=0;
/**
* Property SQRT2
* @memberOf Math
* @since Standard ECMA-262 3rd. Edition
* @since Level 2 Document Object Model Core Definition.
*/
Math.SQRT2=0;
/**
* function abs(x)
* @memberOf Math
* @param {Number} x
* @type Number
* @returns {Number}
* @since Standard ECMA-262 3rd. Edition
* @since Level 2 Document Object Model Core Definition.
*/
Math.abs=function(x){return 0;};
/**
* function acos(x)
* @memberOf Math
* @param {Number} x
* @type Number
* @returns {Number}
* @since Standard ECMA-262 3rd. Edition
* @since Level 2 Document Object Model Core Definition.
*/
Math.acos=function(x){return 0;};
/**
* function asin(x)
* @memberOf Math
* @param {Number} x
* @type Number
* @returns {Number}
* @since Standard ECMA-262 3rd. Edition
* @since Level 2 Document Object Model Core Definition.
*/
Math.asin=function(x){return 0;};
/**
* function atan(x)
* @memberOf Math
* @param {Number} x
* @type Number
* @returns {Number}
* @since Standard ECMA-262 3rd. Edition
* @since Level 2 Document Object Model Core Definition.
*/
Math.atan=function(x){return 0;};
/**
* function atan2(x,y)
* @memberOf Math
* @param {Number} x
* @param {Number} y
* @type Number
* @returns {Number}
* @since Standard ECMA-262 3rd. Edition
* @since Level 2 Document Object Model Core Definition.
*/
Math.atan2=function(x,y){return 0;};
/**
* function ceil(x)
* @memberOf Math
* @param {Number} x
* @type Number
* @returns {Number}
* @since Standard ECMA-262 3rd. Edition
* @since Level 2 Document Object Model Core Definition.
*/
Math.ceil=function(x){return 0;};
/**
* function cos(x)
* @memberOf Math
* @param {Number} x
* @type Number
* @returns {Number}
* @since Standard ECMA-262 3rd. Edition
* @since Level 2 Document Object Model Core Definition.
*/
Math.cos=function(x){return 0;};
/**
* function exp(x)
* @memberOf Math
* @param {Number} x
* @type Number
* @returns {Number}
* @since Standard ECMA-262 3rd. Edition
* @since Level 2 Document Object Model Core Definition.
*/
Math.exp=function(x){return 0;};
/**
* function floor(x)
* @memberOf Math
* @param {Number} x
* @type Number
* @returns {Number}
* @since Standard ECMA-262 3rd. Edition
* @since Level 2 Document Object Model Core Definition.
*/
Math.floor=function(x){return 0;};
/**
* function log(x)
* @memberOf Math
* @param {Number} x
* @type Number
* @returns {Number}
* @since Standard ECMA-262 3rd. Edition
* @since Level 2 Document Object Model Core Definition.
*/
Math.log=function(x){return 0;};
/**
* function max(arg)
* @memberOf Math
* @param {Number} args
* @type Number
* @returns {Number}
* @since Standard ECMA-262 3rd. Edition
* @since Level 2 Document Object Model Core Definition.
*/
Math.max=function(args){return 0;};
/**
* function min(arg)
* @memberOf Math
* @param {Number} args
* @type Number
* @returns {Number}
* @since Standard ECMA-262 3rd. Edition
* @since Level 2 Document Object Model Core Definition.
*/
Math.min=function(args){return 0;};
/**
* function pow(x,y)
* @memberOf Math
* @param {Number} x
* @param {Number} y
* @type Number
* @returns {Number}
* @since Standard ECMA-262 3rd. Edition
* @since Level 2 Document Object Model Core Definition.
*/
Math.pow=function(x,y){return 0;};
/**
* function pow()
* @memberOf Math
* @type Number
* @returns {Number}
* @since Standard ECMA-262 3rd. Edition
* @since Level 2 Document Object Model Core Definition.
*/
Math.random=function(){return 0;};
/**
* function round(x)
* @memberOf Math
* @param {Number} x
* @type Number
* @returns {Number}
* @since Standard ECMA-262 3rd. Edition
* @since Level 2 Document Object Model Core Definition.
*/
Math.round=function(x){return 0;};
/**
* function sin(x)
* @memberOf Math
* @param {Number} x
* @type Number
* @returns {Number}
* @since Standard ECMA-262 3rd. Edition
* @since Level 2 Document Object Model Core Definition.
*/
Math.sin=function(x){return 0;};
/**
* function sqrt(x)
* @memberOf Math
* @param {Number} x
* @type Number
* @returns {Number}
* @since Standard ECMA-262 3rd. Edition
* @since Level 2 Document Object Model Core Definition.
*/
Math.sqrt=function(x){return 0;};
/**
* function tan(x)
* @memberOf Math
* @param {Number} x
* @type Number
* @returns {Number}
* @since Standard ECMA-262 3rd. Edition
* @since Level 2 Document Object Model Core Definition.
*/
Math.tan=function(x){return 0;};
节流概念(Throttle)
按照设定的时间固定执行一次函数，比如200ms一次。注意：固定就是你在mousemove过程中，执行这个节流函数，它一定是200ms（你设定的定时器延迟时间）内执行一次。没到200ms，一定会返回，没有执行回调函数的。
主要应用场景有：scroll、touchmove
防抖概念(Debounce)
抖动停止后的时间超过设定的时间时执行一次函数。注意：这里的抖动停止表示你停止了触发这个函数，从这个时间点开始计算，当间隔时间等于你设定时间，才会执行里面的回调函数。如果你一直在触发这个函数并且两次触发间隔小于设定时间，则一定不会到回调函数那一步。·
主要应用场景有：input验证、搜索联想、resize
节流实现
思路： 第一次先设定一个变量true，第二次执行这个函数时，会判断变量是否true，是则返回。当第一次的定时器执行完函数最后会设定变量为flase。那么下次判断变量时则为flase，函数会依次运行。
防抖实现
思路：首次运行时把定时器赋值给一个变量，第二次执行时，如果间隔没超过定时器设定的时间则会清除掉定时器，重新设定定时器，依次反复，当我们停止下来时，没有执行清除定时器，超过一定时间后触发回调函数。
博文有介绍更详细的原理和代码demo:网页链接,希望可以帮到您