Question

我有一个html结构，如下所示也有AJAX API，可以异步刷新第三个div内的span。我想反复检查div3内的跨度内容，这是由API 动态添加的。如果它包含＆＃39;嗨＆＃39;我希望在div3内显示图像，否则不显示任何内容。

<div id="div1">
  <div id="div2">
   <div id="div3">
       <span>Hi</span>
   </div> 
  </div>
</div>

<script type="text/javascript">
         $(function(){
          (function loopsiloop(){
            setTimeout(function(){
            var tmp = $('#div3').find("span").val();
            if(tmp=='hi'){
            document.getElementById("myChatLinkInfo").innerHTML ='<img src="http://slovnikonline.com/img/hi-ohio-logo.jpg">';
            }
            loopsiloop();
        },4000);
    })();
loopsiloop();
         });
</script>

Answer 1

有两种方法可以重复一项功能：setInterval()和setTimout( // call fn inside itself )。

根据我的经验，第二种方式是最好的，因为如果某些内容干扰setInterval功能，它将无法正确调整其时间 - 随着时间的推移，您最终可能会有100％的浏览器使用率（基本上是冻结app）setInterval试图赶上。参见：

setTimeout or setInterval?

http://www.erichynds.com/blog/a-recursive-settimeout-pattern

您的代码看起来像这样：

$(function(){
    (function loopsiloop(){
        setTimeout(function(){

            //AJAX below
            var tmp = $('#checkme').val();
            $('#freshme').text(tmp);
            //AJAX ABOVE

            loopsiloop();
        },4000); // <=== 4 sec delay
    })();

    loopsiloop();

}); //END document.ready

jsFiddle Demo

以下是获取AJAX基础知识的一些帖子：

A simple example

More complicated example

Populate dropdown 2 based on selection in dropdown 1

反复检查div内的内容，如果找到一些文本则显示图像

1 个答案: