zoukankan      html  css  js  c++  java
  • js setTimeout函数

    最近在看JS DOM编程艺术,在第十章的动画里面有个setTimeout函数的例子中涉及了很多的引号,研究了好大一会才看明白,综合网上各个大神的解释和自己的理解,其原理是这样的:

    首先看下程序源代码:

     1 function moveElement(elementID,final_X,final_Y,interval){
     2     if(!document.getElementById) return false;
     3     if(!document.getElementById(elementID)) return false;
     4     var elem = document.getElementById(elementID);
     5     var xpos = parseInt(elem.style.left);
     6     var ypos = parseInt(elem.style.top);
     7     if (xpos==final_X && ypos==final_Y){
     8         return true;
     9     }
    10     if(xpos<final_X){
    11         xpos++;
    12     }
    13     if(xpos>final_X){
    14         xpos--;
    15     }
    16     if(ypos<final_Y){
    17         ypos++;
    18     }
    19     if(ypos>final_Y){
    20         ypos--;
    21     }
    22     elem.style.left = xpos +"px";
    23     elem.style.top = ypos +"px";
    24     var repeat = "moveElement('"+elementID+"',"+final_X+","+final_Y+","+interval+")";
    25     moveMent = setTimeout(repeat,interval);
    26 }
    这段代码的功能是通过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)};
    这样更容易读一些,效果也完全一样。
  • 相关阅读:
    Swift学习 --- 2.1基础部分
    【oracle案例】ORA-01722
    一种适合于大数据的并行坐标下降法
    【机器学习算法-python实现】svm支持向量机(3)—核函数
    让Editplus支持sql语法高亮显示
    CF986F Oppa Funcan Style Remastered
    HashMap和Hashtable的区别
    ArrayList和Vector的区别
    基本概念
    java编程规范
  • 原文地址:https://www.cnblogs.com/laowu-blog/p/5064071.html
Copyright © 2011-2022 走看看