javascript - 从网页经过一段时间后获取文本选择

Question

我想在选择完成后几秒钟获取所选文本以及 DOM 元素以及文本选择偏移量的结尾在网页中的位置。

就像您突出显示某些文本一样，如果在 3 秒内该文本仍然突出显示，那么我想运行一些代码，该代码将突出显示的文本和距离该文本最近的祖先的 DOM 元素作为参数。

我发现有这个selectstart事件，

https://developer.mozilla.org/en-US/docs/Web/API/Document/selectstart_event

还有 selectionchange 事件，但我没有看到 selectend 事件。

一些想法是这样的:

document.addEventListener('selectionchange', () => {
  // if (Math.abs(Date.now().getTime() - process_request_start.getTime()) / 1000 <= 5
  // if (is_processing_request === true) {
  //   return;
  // }

  setTimeout(() => {
    if (is_processing_request === true) {
      return;
    } else {
      is_processing_request = true;
      console.log(document.getSelection());
      is_processing_request = false;
    }
  }, 5000);
});

所以我正在寻找提供/模拟 selectend 的优雅代码示例，我有一些使用 setTimeout 的工作想法，但正在寻找任何其他解决方案，更喜欢工作代码并且不假设任何 Jquery/libs，只是 native DOM 环境。

Answer 1

对于这个特殊问题，clearTimeout 是您的 friend !您只需取消超时，直到时间过去(在本例中我将其缩短为 2 秒):

let waiting = null;

document.addEventListener('selectionchange', () => {
  if (waiting) clearTimeout(waiting);
  waiting = setTimeout(() => {
    console.log(document.getSelection().toString());
    waiting = null;
  }, 2000);
});

<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus viverra diam quis aliquet pulvinar. Donec fringilla feugiat elit, vitae pretium turpis suscipit et. Integer tempus massa pellentesque arcu sagittis iaculis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis faucibus vestibulum tempus. Morbi at dolor rutrum, malesuada ex sed, tempor nisl. Aenean viverra accumsan accumsan. Suspendisse dignissim augue tellus, quis sollicitudin enim dignissim nec. Nunc mollis vehicula nibh, sed suscipit diam tristique vitae. Nam efficitur massa quis ultrices lacinia. Nunc consequat interdum nunc, vel luctus risus faucibus vel. In arcu diam, bibendum ac enim vel, dignissim vehicula quam. Donec non justo scelerisque, hendrerit est rhoncus, consectetur mi. Pellentesque a lorem eget ex placerat sodales eget sit amet metus. Phasellus aliquam vitae neque vel suscipit.

In in nisl tristique, dictum justo ut, consectetur risus. Suspendisse congue dignissim orci, scelerisque accumsan massa ornare vel. Sed finibus ultrices felis, eu ultrices magna consectetur nec. Proin eu fringilla risus. Cras id posuere ex, sed porta dui. Integer id dolor massa. Cras dui ante, congue a odio non, pulvinar faucibus nisi. Nunc in ex non quam rutrum tempus sit amet ac neque. Vestibulum blandit vulputate massa, ut tincidunt magna dictum id. Vivamus laoreet auctor sollicitudin. Duis eu quam ac lacus faucibus imperdiet sodales eu nisl. Integer auctor commodo turpis, a ultricies sem lacinia iaculis.

Quisque id mattis neque, ut dignissim lectus. Curabitur ex libero, rutrum sed massa a, ultricies fringilla justo. Pellentesque in interdum felis, et aliquet ante. Praesent mauris leo, pretium quis lectus non, ultricies elementum neque. Nam suscipit ullamcorper neque sed iaculis. Maecenas placerat nisl et convallis hendrerit. Suspendisse molestie erat non leo cursus, in maximus sem facilisis. Ut non magna quis purus pellentesque auctor sed sed lorem. Aenean sed iaculis metus, at bibendum libero. Pellentesque in est nec ipsum maximus rutrum in vel dui. Duis porta laoreet dolor, aliquet eleifend mi dapibus consequat.

Mauris posuere tempus libero ut ullamcorper. Aenean ac accumsan enim. Quisque ex felis, pretium euismod dui et, euismod malesuada sapien. Etiam et tempus nulla. Quisque aliquet aliquet risus dapibus vestibulum. Etiam blandit leo odio, ac fringilla ante molestie nec. Sed commodo ex a finibus commodo.

Fusce sed fringilla tellus. Fusce id sagittis ipsum. Vivamus lacus neque, interdum et enim et, ultricies consectetur quam. Aenean lacus augue, placerat id odio vitae, imperdiet sodales mauris. In ornare est sit amet vestibulum interdum. Fusce ultrices, mi non mollis condimentum, est ligula dictum arcu, sed hendrerit magna dolor et ex. Morbi faucibus interdum mattis. Duis vel luctus sem, vitae porta elit. In gravida, leo at laoreet iaculis, mi odio ultrices nulla, sed dictum metus enim ac mauris. Sed odio est, consequat vel turpis et, accumsan accumsan libero. Maecenas nec luctus quam. Aenean et lobortis libero, quis pulvinar felis. Vestibulum sed dolor ornare, ultrices justo non, aliquam felis. Mauris sagittis rutrum mi, sit amet imperdiet lorem luctus non. Praesent ac tortor maximus, facilisis diam sit amet, rutrum nunc. Fusce sit amet lectus pretium, vehicula arcu laoreet, elementum justo.</div>