javascript - 避免多次点击导航栏 html/javascript

Question

我的 html 页面上有一个导航栏。当用户点击一个元素时，我更改了一个 div 的内容。问题是，如果用户快速连续多次单击某个元素，div 的内容也会多次更改。 我想要的是当用户多次快速点击一个元素时，只改变一次内容。

感谢任何帮助。

编辑:

我正在使用带有 onclick 属性的 Bootstrap 菜单来相应地更改一些内容。

HTML

<ul class="nav nav-tabs">
    <li><a href="#" onclick="changeContent(this)">Home</a></li>
    <li><a href="#" onclick="changeContent(this)">Menu 1</a></li>
    <li><a href="#" onclick="changeContent(this)">Menu 2</a></li>
    <li><a href="#" onclick="changeContent(this)">Menu 3</a></li>
</ul>

JS

function changeContent(item){
    //changing parent content-just for demo
    $(this).parent.html("Some content");
}

所以如果用户快速多次点击一个元素，内容也会随着每次点击而改变多次。 我希望内容仅更改一次以进行多次快速点击。

Answer 1

one click per second. This is to avoid user clicking like crazy.

1. 使用 removeAttr 删除内联 onclick 属性
2. 使用 setTimeout 在 x 间隔后重置属性

function changeContent(elem, num) {
  var that = $(elem);
  that.parent().append("Some content"+num);

  that.removeAttr('onclick');
  setTimeout(function() {
    that.attr('onclick', 'changeContent(this,'+num+')');
  }, 1000);
}

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

<ul class="nav nav-tabs">
  <li><a href="#" onclick="changeContent(this, 123)">Home</a> 
  </li>
  <li><a href="#" onclick="changeContent(this, 432)">Menu 1</a> 
  </li>
  <li><a href="#" onclick="changeContent(this, 545)">Menu 2</a> 
  </li>
  <li><a href="#" onclick="changeContent(this, 765)">Menu 3</a> 
  </li>
</ul>