JavaScript, jQuery và 'this': những gì đang xảy ra ở đây?

Question

Đây là câu hỏi về những gì đang xảy ra trong mã của tôi. Nó hoạt động, nhưng tôi cần một chút giác ngộ ...

Tôi đang sử dụng jQuery để tạo trình xử lý sự kiện trên phần tử nhập văn bản. HTML đơn giản sẽ như sau:

<input type="text" id="autocomplete" size="50" /> 

tôi cần phải nhận được sự kiện bất cứ khi nào ai đó một cái gì đó vào lĩnh vực đó, và để tránh bị ngập lụt với các sự kiện tôi đã thiết lập các event listener với một bộ đếm thời gian để cho sự kiện của tôi đang nghe chỉ chạy nếu người dùng đã không gõ bất cứ điều gì cho 125 ms:

jQuery('#autocomplete').keyup(function(e) { 
    e.preventDefault(); 
    clearTimeout(this.timer); 
    this.timer = setTimeout(function() { 
    jQuery.getJSON([URL goes here], function(data) { 
     // processing of returned data goes here. 
    } 
    }, 125); 

console.log(this); 
}); 

này hoạt động, nhưng tôi không hoàn toàn chắc chắn nếu tôi hiểu tất cả mọi thứ xảy ra ở đây. Như bạn thấy từ đoạn mã trên, tôi cần theo dõi ID của bộ hẹn giờ đã được tạo trên sự kiện cuối cùng. Tôi làm điều đó bằng cách lưu trữ nó trong this.timer. Tuy nhiên, từ khóa this trong trường hợp này đề cập đến yếu tố đầu vào. Đây là những gì console.log kết quả đầu ra:

<input type="text" id="autocomplete" size="50" /> 

Is it OK để lưu trữ các timer ID trên các yếu tố đầu vào? Đối với tất cả những gì tôi biết, tôi có thể làm điều gì đó ngu ngốc. Đây có phải là "thực hành tốt nhất" hay điều gì đó rất khác biệt?

Answer 1

Nói chung, tôi không muốn đặt bất kỳ giá trị nào khác trực tiếp vào đối tượng DOM. Khi DOM phát triển, có một cơ hội mỏng mà không gian tên bạn chọn có thể được DOM sử dụng cho các mục đích khác. Cũng như các kịch bản khác này có thể gây xung đột không gian tên, chắc chắn với một biến có tên là bộ đếm thời gian. Nếu bạn phải làm điều này thì hãy sử dụng một không gian tên tối nghĩa để giảm thiểu rủi ro này. Phiên bản cũ của IE cũng có hành vi lạ khi nói đến serialising một nút DOM, bạn có thể kết thúc với một thuộc tính thực tế trong nút gọi là bộ đếm thời gian với một giá trị rất kỳ quặc. Cũng như điều này, console.log không trả về danh sách các thuộc tính nút DOM làm cho việc gỡ rối phức tạp hơn mức cần thiết.

Nói chung, thực hành tốt hơn là để nguyên DOM như nó và tham chiếu các thuộc tính của nó như được xác định bởi đối tượng tài liệu. Theo ý kiến ​​của tôi, việc đặt bộ tính giờ vào tương đương với biến tĩnh công cộng trong một hàm ẩn danh cùng với trình xử lý của bạn, điều này tránh bất kỳ vấn đề phạm vi nào mà bạn có thể vô tình ghi đè bộ hẹn giờ và giữ mã mô-đun của bạn.

(function($) { 

    // Static variable for this function 
    var keyupTimer; 

    // Event handler for keyup 
    $('#autocomplete').keyup(function(event) 
    { 
     event.preventDefault(); 

     clearTimeout(keyupTimer); 

     keyupTimer = setTimeout(function() 
     { 
      $.getJSON([URL goes here], function(data) 
      { 
       // processing of returned data goes here. 
      } 
     }, 125); 
    }); 
})(jQuery);