Textarea chậm trễ sau khi đăng ký sự kiện `keydown` bằng cách sử dụng Javascript

Question

Làm cách nào để liên kết một chuỗi mã với sự kiện onkeydown, nhưng tiếp tục nhập văn bản vào một số textarea nhanh và sắc nét? Bất cứ điều gì nhiều hơn một vài câu lệnh IF dường như làm chậm nó xuống khá đáng kể.

EDIT: Tôi nên thêm (không thể tin rằng mình đã quên!) Rằng điều này không ảnh hưởng đến trình duyệt trên máy tính để bàn. Nó chủ yếu là một vấn đề với iPhone Safari. Các trình duyệt di động khác cũng có thể bị ảnh hưởng, nhưng chúng tôi đang tập trung vào iPhone Safari vì nó thực thi JS tốt nhất (AFAIK)

Answer 1

Vâng, một cách để đi sẽ không sử dụng onkeydown, mà thay vào đó sử dụng bộ hẹn giờ. Bạn có thể thiết lập một khoảng thời gian chạy một chức năng kiểm tra các nội dung của TextArea và chạy logic của bạn ở đó. Có vẻ như nó sẽ vượt qua hầu hết các chi phí. Dù sao, cho nó một shot, tôi nghĩ rằng nó có thể giúp đỡ.

Đây là cách bạn sẽ sử dụng nó:

// First param is the function to call, second is 
// time interval in miliseconds 
var timer = setTimeout(checkTextArea(), 5000); 

function checkTextArea() { 
    var text = document.getElementById("textarea").value; 
    // logic... 
    timer = setTimeout(checkTextArea(), 5000); // we loop it back to 
               //the function with the timer 
} 

Answer 2

Xét chỉnh sửa của bạn về vấn đề này được tập trung vào việc tiếp cận iPhone ...

iPhone thực sự chỉ là không có nhiều quyền lực đó với nó. Bạn chỉ nên sử dụng onchange hoặc onblur thay vì onkeydown.

---

---

Một thay thế cho câu trả lời của Dave đang chờ người dùng tạm dừng (ví dụ trong 5 giây):

var textarea = document.getElementById('textarea'); 

function checkTextArea() { 
    if (textarea.value /* ... */) { 
    /* ... */ 
    } 
} 

textarea.keyDownTimeout = null; 
textarea.onkeydown = function() { 
    if (textarea.keyDownTimeout) clearTimeout(textarea.keyDownTimeout); 
    textarea.keyDownTimeout = setTimeout(checkTextArea, 5000); 
}; 

này nên thiết lập bộ đếm thời gian với KeyDown đầu tiên, dừng lại và tái tạo hẹn giờ cho mỗi lần nhấn phím kế tiếp. Cuối cùng gọi 5 giây sau khi người dùng ngừng nhập.

Ngoài ra, hãy lưu ý việc thiếu dấu ngoặc đơn sau checkTextArea. Điều này sẽ cung cấp cho setTimeout tham chiếu của hàm so với tham số return của hàm.

---

Bạn cũng có thể thiết lập này lên trong một chức năng để làm cho nó dễ dàng hơn để sử dụng cho nhiều yếu tố:

function setPauseTimer(element, timeout, callback) { 
    var timer = null; 
    element.onkeydown = function() { 
    if (timer) clearTimeout(timer); 
    timer = setTimeout(function(){ callback(element); }, timeout); 
    }; 
} 

function checkTextArea(textarea) { /* moved from global to argument */ 
    if (textarea.value /* ... */) { 
    /* ... */ 
    } 
} 

setPauseTimer(document.getElementById('textarea'), 5000, checkTextArea); 

Answer 3

Có lẽ bạn có thể gửi "một loạt các mã" và chúng ta có thể thảo luận xem có một số refactoring có (trước khi phức tạp nó với một bộ đếm thời gian). Có vẻ như bạn có thể chuyển sang tối ưu hóa thứ cấp trước tiên.

Answer 4

Tôi đã nghĩ về các phương pháp hẹn giờ. Tôi tin rằng setTnterval sẽ tốt hơn một setTimeout, nhưng điều đó hầu như không có vẻ là một giải pháp tối ưu, phải không?