Bagaimanakah Saya Boleh Melaksanakan Penjejakan Kedudukan Tetikus Berkala dalam JavaScript?

Penjejakan Kedudukan Tetikus Berkala dalam Javascript

Dalam pembangunan web, menjejak kedudukan tetikus ialah teknik asas untuk membina antara muka pengguna interaktif. Pengguna bergantung pada fungsi ini untuk pelbagai tujuan, seperti manipulasi imej, pengesahan borang dan kawalan permainan. Walau bagaimanapun, mungkin terdapat keadaan di mana anda perlu menjejaki kedudukan tetikus secara berkala, pada selang masa yang tetap.

Pendekatan Tradisional: Pendengar Acara

Secara lalai, apabila anda menggerakkan tetikus ke atas halaman web, penyemak imbas mencetuskan satu siri acara: 'mouseup,' 'mousedown' dan 'mouseup.' Dari segi sejarah, pengaturcara telah bergantung pada pendengar acara untuk menjejaki kedudukan tetikus. Acara 'mousemove', khususnya, menyala secara berterusan semasa tetikus bergerak, membolehkan anda menangkap koordinat kedudukan pada bila-bila masa. Walau bagaimanapun, pendekatan ini mempunyai had: ia hanya mengemas kini data kedudukan apabila tetikus benar-benar bergerak.

Penyelesaian Berasaskan Pemasa

Bagaimana jika anda memerlukan data kedudukan dikemas kini pada selang masa yang tetap, walaupun apabila tetikus tidak bergerak? Penyelesaian yang mungkin adalah menggunakan pemasa. Daripada bergantung semata-mata pada pendengar acara, anda boleh menyediakan pemasa yang secara berkala menggunakan fungsi untuk menanyakan kedudukan tetikus. Pendekatan ini memastikan anda mendapat kemas kini kedudukan tidak kira sama ada tetikus bergerak atau tidak.

Contoh Pelaksanaan

Berikut ialah coretan kod yang menunjukkan cara melaksanakan penjejakan kedudukan tetikus berkala menggunakan pemasa:

(function() {
  var mousePos;

  document.onmousemove = handleMouseMove;
  setInterval(getMousePosition, 100); // Set the timer to update every 100 milliseconds

  function handleMouseMove(event) {
    event = event || window.event; // IE-ism

    // If pageX/Y aren't available and clientX/Y are, calculate pageX/Y - logic taken from jQuery.
    // (This is to support old IE)
    if (event.pageX == null && event.clientX != null) {
      var eventDoc = (event.target && event.target.ownerDocument) || document;
      var doc = eventDoc.documentElement;
      var body = eventDoc.body;

      event.pageX = event.clientX +
        (doc && doc.scrollLeft || body && body.scrollLeft || 0) -
        (doc && doc.clientLeft || body && body.clientLeft || 0);
      event.pageY = event.clientY +
        (doc && doc.scrollTop || body && body.scrollTop || 0) -
        (doc && doc.clientTop || body && body.clientTop || 0);
    }

    mousePos = {
      x: event.pageX,
      y: event.pageY
    };
  }

  function getMousePosition() {
    var pos = mousePos;
    if (!pos) {
      // We haven't seen any movement yet
    } else {
      // Use pos.x and pos.y
    }
  }
})();

Pertimbangan

Perhatikan bahawa kaedah ini memerlukan kedua-dua pendengar acara dan pemasa untuk berfungsi dengan baik. Sebagai amalan terbaik, kosongkan selang pemasa apabila program selesai pelaksanaan untuk mengelakkan penggunaan sumber yang tidak perlu. Selain itu, ingat untuk mengehadkan pemprosesan yang dilakukan dalam fungsi pemasa untuk meminimumkan kesan prestasi, terutamanya jika kemas kini adalah kerap.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Melaksanakan Penjejakan Kedudukan Tetikus Berkala dalam JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!