javascript - 当我尝试使用 settimeout 刷新页面时，它无法正常工作

Question

此代码的目的是在 1 秒或 5 秒的等待时间后刷新页面，具体取决于随机变量。但是，下面的代码使其要么在每次 1 秒的等待时间后刷新，要么在每次 5 秒的等待时间后刷新。

如何使每次刷新的刷新等待时间为 1 秒或 5 秒？

// ==UserScript==
// @name        google.com
// @namespace   John Galt
// @description Basic Google Hello
// @match       *^https://www.google.com/$*
// @version     1
// @require     https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js
// @grant       GM_xmlhttpRequest
// @run-at document-end
// ==/UserScript==

//*****************************************START OF SET_TIMEOUT
(function ($) {
  'use strict';
  var interval;
  if (Math.floor(Math.random() * 2) == 0) { interval = 1000; }
  else { interval = 5000; }
  if (window == window.top) {
    var body = $('body').empty();
    var myframe = $('<iframe>')
      .attr({ src: location.href })
      .css({ height: '95vh', width: '100%' })
      .appendTo(body)
      .on('load', function () {
        setTimeout(function () {
          myframe.attr({ src: location.href });
        }, interval);
      });
  }
})(jQuery);
//*****************************************END OF SET_TIMEOUT

Answer 1

问题是，当您将 iframe 指向当前文档时，包含 iframe 的文档仅加载一次(这就是为什么您看到一遍又一遍地使用相同的间隔)，并且当iframe在其中加载相同的文件时，它为间隔生成的值与控制加载的值不同>iframe。

我认为您应该对 setTimeout 内的当前文件执行 AJAX 请求。这样您只需再次执行 AJAX 调用即可处理服务器错误。这样就简单多了。没有iframe。

(function ($) {
 'use strict';

 // Store possible delay values in an array
 var possibleDelays = [1000, 5000];
      
 function reload() {
   $.ajax(location.href)
    .done(function () {
       $("h1").text(new Date().toLocaleTimeString());
       // Success! Do it again!
       setTimeout(reload, possibleDelays[Math.round(Math.random())]);
    }).fail(reload); // When there's an error, try again
  }

  // Initiate the process with an interval that is generated right here.
  setTimeout(reload, possibleDelays[Math.round(Math.random())]);
})(jQuery);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1></h1>