javascript - a标签点击后, 停留一秒后再跳转页面?

Question

在a标签点击后会有短暂的动画效果, 类似 loading, 动画结束后再跳转页面, 有什么方法能实现这样的功能?

Answer 1

补充一个

$('a').click(function() {
  // ... 停留期间需要执行的函数 ...
  setTimeout(function() {
      location.href = $(this).attr('href');
  }, 1000)
  return false;
})

Answer 2

用其他标签写一个按钮注册click，在click事件里加上1秒钟定时器就可以

<button id="myButton">Click me</button>

<script>
  const button = document.querySelector('#myButton');
  button.addEventListener('click', () => {
    setTimeout(() => {
      console.log('1 秒钟的定时器已经结束了');
    }, 1000);
  });
</script>

还方便

Answer 3

如楼上所说，只能js劫持一下点击事件

<a href="https://www.baidu.com" target="_blank" onclick="onLinkClick" >这是个链接</a>

<script>
  const onLinkClick = function(e) {
    // 阻止默认跳转行为
    e.preventDefault();
    // 设置loading
    // ...
    const href = e.target.getAttribute('href');
    const openType = e.target.getAttribute('target');
    // 1秒后跳转
    setTimeout(() => {
      window.open(href, openType);
    }, 1000);
  }
</script>

Answer 4

比如说劫持 or 不使用 <a> 标签默认通过 href 的跳转，通过JS控制跳转即可。