suchen

Heim  >  Fragen und Antworten  >  Hauptteil

前端 - 如何在 javascript 中实现 unload 延迟跳转 或 有效的不访问网络、不抢光 CPU 的 sleep 方法?

最近开发一个项目遇到个问题,需要实现在页面跳转前,发送多个跟踪请求。由于跳转的过程不受我们控制,也不想干预客户网站的代码,所以不能通过跟踪请求完成后回调网站代码来实现。

我的想法就是在跟踪发起时给某个计数器加 1,在每个跟踪结束时给计数器减 1;unload 里判断计数器的值,不等于 0 就 sleep 一些毫秒,等于 0 就返回,unload 就可以继续了。前提是:1.有 sleep 函数 2.sleep 是同步的(阻塞的)

请问有何办法可以实现?当然如果有其他的能实现 unload 延迟(不能弹框哦)的方法也请告知,谢谢了。

注:何为跟踪请求: 就是为了监测页面或商业效果,将页面或商品的一些参数发往不同的监测系统,通常利用 new Image() 来发送(跨域)。


说下提这个问题的原因。我在做一些 web 监测相关的项目,本来遇到这种跳转的问题以前都是让客户自己延时来解决的,但是前几天发现,Google Tag Manager 里增加了一个“事件监听器”的代码类型,其下的“表单提交监听器”有个“等待代码”的选项,可以实现最多 2 秒(如果提前完成就不到 2 秒)的延时跳转。

我想知道他们采用的什么方式,是 submit 事件有什么特殊的办法(点击却没给这个选项)?还是他们自己实现了延时?可惜代码是压缩过的,跟踪了一遍也没得到有价值的信息。


突然想明白了,我想之所以 google 没给点击(也可能跳转呀)也加上延时选项,原因可能就是他们也没能实现延时跳转的功能,而对于 FROM,可以利用 preventDefault 阻止提交,在 2 秒后(或完成后)再触发表单的提交,用一个状态变量来判断是要执行我们的代码还是还是真的提交。貌似链接也可以哦,我有空再试试。

唉,我想可能确实没什么好的办法实现延时!

实验代码如下(用 jQuery 方便就不写原生 JS 了):

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

<code><form action="http://www.baidu.com/">

    <button type="submit">Submit</button>

</form>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>

<script type="text/javascript">

    $(document).submit(function(evt) {

        if (window.TM_FLAG) return;

        else window.TM_FLAG = 1;

 

        evt.preventDefault();

        setTimeout(function() {

            $(evt.target).submit();

            delete window.TM_FLAG;

        }, 2000);

 

        console.log("run code 1");

        console.log("run code 2");

        console.log("run code 3");

    });

</script>

</code>

怪我咯怪我咯2896 Tage vor678

Antworte allen(1)Ich werde antworten

  • 高洛峰

    高洛峰2017-04-10 12:50:33

    我写一个同步阻塞的sleep吧,这是我在学习setTimeout时看别人的测试例子。

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    16

    17

    18

    19

    20

    21

    22

    <code class="lang-javascript">//占cpu的做法

    var sleep=function(delayTime){

        var startTime=new Date();

        while(new Date()-startTime<=delayTime){

     

        }

    };

    //jquery Deferred

    function wait(ms) {

      var deferred = $.Deferred();

      setTimeout(deferred.resolve, ms);

     

     // We just need to return the promise not the whole deferred.

     return deferred.promise();

    }

     

    // Use it

    wait(5500).then(function () {

        alert('hahahaah');

      // Do something brilliant here!

    });

    </code>

    Antwort
    0
  • StornierenAntwort