Question

我正在开发自己的作品集，我想使用setTimeout函数在两页之间放置一个延迟。我已经尝试了一些方法，但是还没有工作。我已经在使用一个函数打开所有框的“ href”，但现在我只想延迟一下从accueil.html到presentation.html的时间。

“ accueil.html”：

document.addEventListener('DOMContentLoaded', function()
{
  var items = document.querySelectorAll('.ouverture');
  for (var i = 0; i < items.length; i++)
  {
    var item = items[i];
    item.addEventListener('click', function()
    {
      var url = this.getElementsByTagName('a');

      url = url[0];
      window.location = url;
    });
  }
});

<div class="box">
  <div class="container">
    <div class="row">
      <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
        <div class="box-part text-center ouverture">
          <i class="fa fa-address-book fa-3x" aria-hidden="true"></i>
          <div class="title">
            <h4><a href="presentation.html" id="pres">Présentation</a></h4>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

只需添加timeout，然后将您重定向到另一页的部分添加到

item.addEventListener('click', function() {         
  var url = this.getElementsByTagName('a');
  if(url.length > 0)
    url = url[0]; 
    setTimeOut(() => {
      window.location = url;
    }, 2000); // 2000 = 2000ms === 2sec   
});

找到更多信息here

Answer 2

“延迟”点击的通用代码段。只需在页面顶部添加脚本并使用0 info it worked if it ends with ok 1 verbose cli [ 'C:\\Program Files\\nodejs\\node.exe', 1 verbose cli 'C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js', 1 verbose cli 'run', 1 verbose cli 'build' ] 2 info using npm@6.9.0 3 info using node@v10.16.0 4 verbose run-script [ 'prebuild', 'build', 'postbuild' ] 5 info lifecycle aliweb@1.0.0~prebuild: aliweb@1.0.0 6 info lifecycle aliweb@1.0.0~build: aliweb@1.0.0 7 verbose lifecycle aliweb@1.0.0~build: unsafe-perm in lifecycle true 8 verbose lifecycle aliweb@1.0.0~build: PATH: C:\Program Files\nodejs\node_modules\npm\node_modules\npm-lifecycle\node-gyp-bin;C:\Users\User\Projects\Workspace\spring-tool-suite-4-4.3.0.RELEASE\aliweb\src\main\resources\static\node_modules\.bin;C:\Program Files (x86)\Common Files\Oracle\Java\javapath;C:\ProgramData\Oracle\Java\javapath;C:\Program Files (x86)\Intel\iCLS Client\;C:\Program Files\Intel\iCLS Client\;C:\Windows\system32;C:\Windows;C:\Windows\System32\Wbem;C:\Windows\System32\WindowsPowerShell\v1.0\;C:\Program Files\Intel\Intel(R) Management Engine Components\DAL;C:\Program Files\Intel\Intel(R) Management Engine Components\IPT;C:\Program Files (x86)\Intel\Intel(R) Management Engine Components\DAL;C:\Program Files (x86)\Intel\Intel(R) Management Engine Components\IPT;C:\Program Files (x86)\Intel\OpenCL SDK\3.0\bin\x86;C:\Program Files (x86)\Intel\OpenCL SDK\3.0\bin\x64;C:\Program Files\PuTTY\;C:\Program Files (x86)\Skype\Phone\;C:\Program Files\Git\cmd;C:\Program Files\nodejs\;C:\Users\User\AppData\Local\atom\bin;C:\Program Files\gs\gs9.25\lib;C:\Program Files\gs\gs9.25\bin;C:\Program Files\Apache\apache-maven-3.6.0\bin;C:\Users\User\AppData\Roaming\npm 9 verbose lifecycle aliweb@1.0.0~build: CWD: C:\Users\User\Projects\Workspace\spring-tool-suite-4-4.3.0.RELEASE\aliweb\src\main\resources\static 10 silly lifecycle aliweb@1.0.0~build: Args: [ '/d /s /c', 'webpack --mode production' ] 11 silly lifecycle aliweb@1.0.0~build: Returned: code: 2 signal: null 12 info lifecycle aliweb@1.0.0~build: Failed to exec build script 13 verbose stack Error: aliweb@1.0.0 build: `webpack --mode production` 13 verbose stack Exit status 2 13 verbose stack at EventEmitter.<anonymous> (C:\Program Files\nodejs\node_modules\npm\node_modules\npm-lifecycle\index.js:301:16) 13 verbose stack at EventEmitter.emit (events.js:198:13) 13 verbose stack at ChildProcess.<anonymous> (C:\Program Files\nodejs\node_modules\npm\node_modules\npm-lifecycle\lib\spawn.js:55:14) 13 verbose stack at ChildProcess.emit (events.js:198:13) 13 verbose stack at maybeClose (internal/child_process.js:982:16) 13 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:259:5) 14 verbose pkgid aliweb@1.0.0 15 verbose cwd C:\Users\User\Projects\Workspace\spring-tool-suite-4-4.3.0.RELEASE\aliweb\src\main\resources\static 16 verbose Windows_NT 6.1.7601 17 verbose argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "run" "build" 18 verbose node v10.16.0 19 verbose npm v6.9.0 20 error code ELIFECYCLE 21 error errno 2 22 error aliweb@1.0.0 build: `webpack --mode production` 22 error Exit status 2 23 error Failed at the aliweb@1.0.0 build script. 23 error This is probably not a problem with npm. There is likely additional logging output above. 24 verbose exit [ 2, true ]属性即可。

delay-click[=numberOfMilliseconds]

document.body.addEventListener("click", function(event) {
  var target = event.target;
  var currentTarget = target.closest("[delay-click]:not(.delay-click-ignore)");

  if (!currentTarget) return;

  var delay = +currentTarget.getAttribute("delay") || 2000;
  currentTarget.classList.add("delay-click-ignore");

  setTimeout(function() {
    target.click();
    currentTarget.classList.remove("delay-click-ignore");
  }, delay);

  event.preventDefault();
});

.delay-click-ignore,
.delay-click-ignore a,
.delay-click-ignore input,
.delay-click-ignore button {
  cursor: progress !important;
}

<div>上的setTimeout函数

2 个答案: