如何正确使用setTimeout与IE？ [英] How to proper use setTimeout with IE?

问题描述

对于用于网站交互研究的模型网页，我使用JavaScript创建了一个模型消息流。该消息流应该按照预先设定的时间间隔显示图像。在Chrome中，此代码按照预先设定的时间间隔将图像张贴在另一个之下。在IE中，只显示第一张图片。我已经删除了window.setTimeout方法中的参数传递，但是为了满足IE我还需要做些什么。我还应该做些什么来使所有图像以预设间隔出现？

我的脚本部分有几个全局变量：

  var updateinterval = 400; //用于
的乘数（整数）var scrollinterval = 5; //在滚动
之前等待的间隔（整数）var point; //用于防止在window.setTimeout中使用参数的整数
 var interval = [0，10，40]; //在间隔中创建多样性的整数数组
 var images = [r1，a1，r2]; //引用图像的字符串数组显示
  
 
 
以下函数存在： 
 
 
 函数trypost（）{
 point = point + 1; 
 if（point< interval.length）{
 //写入所需图片
 document.writeln（< img src ='images /+ images [point] +。 PNG/><峰; br />中）; 
 //时间滚动到底部
 var stb = window.setTimeout（scrollToBottom，scrollinterval）; 
 //时间下一篇文章
 var nextupdate = interval [point] * updateinterval; 
 var tp = window.setTimeout（trypost，nextupdate）; 
 
 
 
 function scrollToBottom（）{
 window.scrollBy（0，document.body.scrollHeight）; 
} 
 
函数startpost（）{
 point = -1; 
 trypost（）; 
} 
 
 window.onload = startpost; 
  
 
 
解决方案
您可以使用setInterval而不是重复调用setTimeout，setInterval重复直到你调用clearInterval。
 
 
 
同样如注释中所述，document.writeln来自不同的十年; 
现在可以直接修改DOM。 
  var i = 0; 
 var interval = [0，10，400，10，1000]; 
 var images = [
https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRTiW-7zqLiG1DNq4Tmt6x4j1iBc0FZRBpyYZtIXgDzUy_NHwTv，
http：//img2.wikia.nocookie .net / __ cb20120327004334 / mrmen / images / a / a0 / MrMean.gif，
https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRTiW-7zqLiG1DNq4Tmt6x4j1iBc0FZRBpyYZtIXgDzUy_NHwTv，
 http://img2.wikia.nocookie.net/__cb20120327004334/mrmen/images/a/a0/MrMean.gif，
https://encrypted-tbn0.gstatic.com/images?q=tbn ：ANd9GcRTiW-7zqLiG1DNq4Tmt6x4j1iBc0FZRBpyYZtIXgDzUy_NHwTv
; 
 
 
 for（var i = 0; i< interval.length; i ++）
 var timer = setTimeout（function（img）{
 var newImg = document。 createElement（IMG）; 
 newImg.src = img; 
 document.getElementById（'holder'）。appendChild（newImg）; 
 
}，interval [i]，图像[1]）; 
  
与此HTML 
 < div id ='持有人'> 
 
< / div> 
  
运行演示
  http://jsfiddle.net/W7QXH/4/  
 
For a mockup-webpage used for research on interaction on websites, I created a mockup message-stream using JavaScript. This message stream should show images at pre-set intervals. In Chrome, this code posts the images below one another, at the pre-set intervals. In IE, only the first image is shown. I have already removed the passing of parameters in the window.setTimeout method, but am lost as to what else I need to do to satisfy IE. What else should I do to make all images appear in the pre-set intervals?

My script-section has several global variables:
var updateinterval = 400; // a multiplier (integer) used to 
var scrollinterval = 5; // an interval (integer) to wait before scrolling
var point; // integer used to prevent using parameters in window.setTimeout
var interval = [0, 10, 40]; // array of integers creating diversity in intervals
var images = ["r1", "a1", "r2"];// array of strings referring to images to show
The following functions are present:
function trypost(){
  point = point + 1;
  if(point < interval.length){
    //write the required image
    document.writeln("<img src='images/"+images[point]+".png'/><br/>"); 
    //time scroll to bottom
    var stb = window.setTimeout(scrollToBottom, scrollinterval);
    //time next post
    var nextupdate = interval[point]*updateinterval;
    var tp = window.setTimeout(trypost, nextupdate);
  }
}

function scrollToBottom(){
  window.scrollBy(0,document.body.scrollHeight);
}

function startpost(){
  point = -1;
  trypost();
}

window.onload = startpost;

解决方案
You can use setInterval instead of repeatedly calling setTimeout, setInterval repeats until you call clearInterval.

Also as noted in the comments, document.writeln is from a different decade ;)
You can modify the DOM directly now.
var i=0;
var interval = [0, 10, 400, 10, 1000];
var images = [
  "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRTiW-7zqLiG1DNq4Tmt6x4j1iBc0FZRBpyYZtIXgDzUy_NHwTv",
    "http://img2.wikia.nocookie.net/__cb20120327004334/mrmen/images/a/a0/MrMean.gif",
    "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRTiW-7zqLiG1DNq4Tmt6x4j1iBc0FZRBpyYZtIXgDzUy_NHwTv",
    "http://img2.wikia.nocookie.net/__cb20120327004334/mrmen/images/a/a0/MrMean.gif",
    "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRTiW-7zqLiG1DNq4Tmt6x4j1iBc0FZRBpyYZtIXgDzUy_NHwTv"
];


for(var i=0; i<interval.length;i++)
var timer = setTimeout(function(img){
    var newImg = document.createElement("IMG");
    newImg.src = img;
    document.getElementById('holder').appendChild(newImg);

}, interval[i], images[i]);
with this HTML
<div id='holder'>

</div>
Running demo
http://jsfiddle.net/W7QXH/4/

                        
这篇关于如何正确使用setTimeout与IE？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！