如何在 javascript 中执行我的 javascript 函数答案

【问题标题】：How to execute my javascript function in javascript如何在 javascript 中执行我的 javascript 函数
【发布时间】：2017-05-16 14:17:43
【问题描述】：

这是使图像向右移动的代码。我已经搜索了如何调用和执行函数，但我不明白。

我知道如何在 HTML 中执行它，但不是在 javascript 中。我想在我一直加载页面时执行它。

<input type="button" value="Start" onclick="moveRight();" />

我已经看到了这段代码，但我无法让它与我的代码一起使用。

window["functionName"](arguments);

例如我应该在括号中写的内容。

<script>
        var imgObj = null;
        var animate ;

        function init(){
           imgObj = document.getElementById('myImage');
           imgObj.style.position= 'relative'; 
           imgObj.style.left = '0px'; 
        }

        function moveRight(){
           imgObj.style.left = parseInt(imgObj.style.left) + 11 + 'px';
           animate = setTimeout(moveRight,22); // call moveRight in 20msec
        }

<body>

  <form>
     <img id="myImage" src="myimage.jpg" />
     <p>Click the buttons below to handle animation</p>
     <input type="button" value="Start" onclick="moveRight();" />
      <input type="button" value="Start" onclick="moveLeft();" />
     <input type="button" value="Stop" onclick="stop();" />
  </form>

【问题讨论】：

您要做的第一件事是验证您的; 分号不会导致问题。它们不是必需的。 w3schools.com/jsref/event_onclick.asp
@Nol — 他们肯定不会造成问题。最佳做法是用分号结束每条语句，而不是依赖 ASI。
我既笨又累。又看了半秒，意识到我没必要这么说。似乎 OP 的问题是他们没有做他们的 Init，这必须让 imgObj 为空。

标签： javascript function call

【解决方案1】：

对上面@Emil 的回答稍加扩展，以便代码在页面加载后立即执行。

使用setInterval()，提供moveRight() 作为function 参数和200 作为delay 将继续每200 毫秒调用一次你的函数。您也可以使用clearInterval() 取消定时器。

您可能希望将其进一步扩展到prevent image from going off-screen（如果这是必需的）。

var img = document.getElementById("myImage"); 
var imgLeft = 0;
var imgTop = 0;
img.style.position = "absolute";

function render() {
  img.style.left = imgLeft + "px";
  img.style.top = imgTop + "px";
}

function moveRight() {
  console.log(img.style.left);
  imgLeft += 10;
  render();
}
var interval = setInterval(moveRight, 200);

<form>
  <img id="myImage" src="myimage.jpg" />      
</form>

【讨论】：

【解决方案2】：

只需"moveRight(); 就可以完成这项工作。你不需要对window 做任何技巧，因为你没有使用变量来保存函数名。

【讨论】：

我在脚本中写了moveRight();，但是当我启动页面时没有任何反应，我的按钮也不起作用，当我删除moveRight(); 时，按钮又开始工作了。
另见：stackoverflow.com/questions/14028959/…
当我尝试运行 moveRight();未捕获的类型错误：无法在 tset.html:52 moveRight @ tset.html:36 (anonymous) @ tset.html:52 处读取 moveRight (tset.html:36) 处的 null 属性“样式”
是的，正如我所说，请参阅stackoverflow.com/questions/14028959/…

【解决方案3】：

window.onload: 在页面加载后立即执行 JavaScript，您也可以在正文中的元素后放置一个脚本标签，它会在页面加载后执行。

函数内部的代码会在“某物”调用（调用）函数时执行：

当事件发生时（当用户单击按钮时）> elem.onclick=functionname()
从 JavaScript 代码调用（调用）时 > functionname()
自动（自调用）> function(){}()

setInterval() 方法以指定的时间间隔（以毫秒为单位）调用函数或计算表达式。

   window.onload = function(){
  var imgObj = document.getElementById('myImage');
  imgObj.style.position= 'relative'; 
  imgObj.style.left = '0px';
  function moveRight(){
    imgObj.style.left = parseInt(imgObj.style.left) + 11 + 'px';
  }
  var animate = setInterval(moveRight,222); // call moveRight in 20msec
  document.getElementById('stop').addEventListener("click", function(){
    clearInterval(animate);
  });
}

<form>
   <img id="myImage" src="myimage.jpg" />
   <input type="button" value="Stop" id="stop"/>
</form>

【讨论】：

【解决方案4】：

试试position: absolute。

var img = document.getElementById("myImage");
var imgLeft = 0;
var imgTop = 0;
img.style.position = "absolute";

function render() {
  img.style.left = imgLeft + "px";
  img.style.top = imgTop + "px";
}

function move(x, y) {
  if (x === void 0) {
    x = imgLeft;
  }
  if (y === void 0) {
    y = imgTop;
  }
  imgLeft += x;
  imgTop += y;
  console.log(imgLeft, imgTop);
  render();
}
render();

<form>
  <img id="myImage" src="myimage.jpg" />
  <p>Click the buttons below to handle animation</p>
  <input type="button" value="right" onclick="move(10,0);" />
  <input type="button" value="left" onclick="move(-10,0);" />
  <input type="button" value="up" onclick="move(0,-10);" />
  <input type="button" value="down" onclick="move(0,10);" />
</form>

【讨论】：

我不想使用按钮，我希望代码自动运行，并且我想在加载页面时在 javascript 中执行该功能。