JavaScript里面的延迟加载--setTimeout()的用法

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://lixuekai.blog.csdn.net/article/details/52699331

想实现类似线程sleep几秒钟的现象,虽然看到这个需求,我知道是要用这个setTimeout()方法来实现,J,avaS,cript延迟加载的功能,
但是不论自己以前的笔记还是说,自己在网上又搜索的例子。
都是乱的一塌糊涂,主要错误如:setTimeout(方法名(参数),“数字”),以为这样就可以了。
但是js也不报错,就是达不到自己想要的效果。
真是误人子弟啊。

主要是参数的使用不正确,如下:

1.参数一:

第一个参数是要执行的方法,只是方法名字不应该带括号和参数;
2.参数二:
第二个参数是要执行的时间,传入数字,不要带引号,带引号就是字符串啦。(哦,我又测试了下,带引号是可以的,好吧,这条略过。。。)

而且你要是打算在for循环里面使用,也不是不可以,写个回调方法就可以了。

而且这个方法是可以脱离j,Q,uery包,仅仅需要个浏览器就可以执行了,当然,浏览器是支持J,avaScript的。

我有如下代码,示范,是如何回调,循环打开五次网页的。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>

<body>

<div class="container">
<div class="jumbotron">
  <h1>心灵的鸡汤</h1>
  <p>生活不止于眼前的苟且,还有明天和后天的呢。</p>
</div>
</div>

<div class="container">
<div class="row">
  <div class="col-md-4">
    <h2>你</h2>
    <p>良辰美景奈何天,为谁辛苦为谁甜,这年华青涩逝去,明白了时间。</p>
  </div>
  <div class="col-md-4">
    <h2>我</h2>
    <p>浅望幸福,不写忧伤,红尘三千,不道惆怅,不问花开几许,只问浅笑安然。</p>
  </div>
  <div class="col-md-4">
    <h2>他</h2>
    <p>不管昨夜经历了怎样的泣不成声,早晨醒来这个城市依然车水马龙。</p>
  </div>
</div>
</div>

</body>
</html>

<script>
  var i = 0;
  openNew(0);

  /**
   * 打开新窗口
   */
  function openNew() {
    if (i < 5) {
      i++;
      window.open("https://www.baidu.com");
      setTimeout(openNew,5000);
    } else {
      return false;
    }
  }
</script>

你只需要把上面的代码,

1.复制粘贴到txt文件,然后修改成html文件,用浏览器打开,

2。然后修改浏览器的弹窗拦截程序,暂时允许所有弹窗。

就可以看到我每五秒打开一次百度首页。

然后,你想循环干什么,只要修改我的那个打开事件就可以了。换成自己的事件就OK拉。


当然,还有个setInterval(),具体怎么用,我下次再详细给示范。

如下:

只需要把上面的script标签里面的代码替换成下面的就可以换种方式循环延迟啦

  var i = 0;
  var ss = setInterval(openNew,1000);


  /**
   * 打开新窗口
   */
  function openNew() {
    if (i < 5) {
      i++;
      console.log("运行第" + i + "次")
    } else {
      console.log("还执行吗");
      clearInterval(ss);
      return false;
    }
  }





展开阅读全文

没有更多推荐了,返回首页