Cắt thời gian diễn ra như thế nào trong javascript?

Question

hoặc ecmascript nhưng tôi tự hỏi liệu nó có thực sự xảy ra hay không phụ thuộc nhiều vào việc cấy ghép chính xác.

javascript là luồng đơn kỹ thuật.

nhưng nếu tôi làm điều gì đó như

$myDIv.animate({ 
    height:"100px" 
}); 

nó thực hiện bất kỳ sự khác biệt nếu tôi làm

A.

$myDIv.animate({ 
    height:"100px" 
}, null, my_cpu_heavy_function); 

hoặc B.

$myDIv.animate({ 
    height:"100px" 
}); 
my_cpu_heavy_function(); 

bởi vì trong thứ hai là hoạt hình wou ld được chiến đấu cho thời gian xử lý với các chức năng nặng CPU và vì vậy giao diện của hình ảnh động sẽ bị ảnh hưởng, phải không?

Vì vậy, Javascript dừng thực thi ở phần cuối của một khối mã đồng bộ hoặc nó cắt một khối tại bất kỳ điểm ngẫu nhiên nào để cho phép một khối khác chạy không đồng bộ được xử lý?

Answer 1

nó thực hiện bất kỳ sự khác biệt nếu tôi làm A hoặc B

Có nó sẽ tạo sự khác biệt.

Phiên bản thứ hai không chiến đấu quá nhiều trong thời gian xử lý. Nó giống như các my_cpu_heavy_function sẽ chiếm tất cả thời gian xử lý một khi nó bắt đầu, giả sử nó là đồng bộ.

Nói cách khác, khi mã bit đồng bộ bắt đầu, nó không kết thúc cho đến khi hoàn thành, không phân biệt mã bất đồng bộ theo thời gian nào có thể được lên lịch để chạy. Mã async sẽ luôn bị buộc phải chờ mã đồng bộ hoàn tất.

Vì vậy, điều sẽ xảy ra là hoạt ảnh sẽ bắt đầu và thực hiện khởi tạo, nhưng sau đó my_cpu_heavy_function sẽ bắt đầu ngay lập tức và chặn phần còn lại của hoạt ảnh cho đến khi hoàn tất.

Answer 2

Không có thời gian cắt trong javascript. Javascript là chuỗi đơn (ngoại trừ công nhân web mà chúng tôi không thảo luận ở đây). Một luồng thực thi javascript chạy cho đến khi nó hoàn thành.

Trong ví dụ mã đầu tiên của bạn, hoạt ảnh sẽ thực hiện tác vụ của nó và khi nó hoàn tất, nó gọi số my_cpu_heavy_function của bạn.

Trong ví dụ mã thứ hai của bạn, hoạt ảnh khởi tạo chính nó và đặt bộ hẹn giờ cho bước hoạt ảnh đầu tiên của nó. Sau đó, nó trở lại và đi vào dòng mã tiếp theo. Các hình ảnh động chỉ mới bắt đầu (và thiết lập một bộ đếm thời gian trong một thời gian ngắn trong tương lai để làm một số công việc nhiều hơn) - nó đã không hoàn thành. Sau đó, my_cpu_heavy_function của bạn chạy và nó sẽ thực thi toàn bộ javascript cho đến khi hoàn tất. Hoạt ảnh không chạy ở tất cả trong khi my_cpu_heavy_function đang chạy. Khi nó kết thúc, sự kiện bộ đếm thời gian mà bộ hoạt ảnh sẽ kích hoạt và hoạt ảnh sẽ hoạt động.

Hoạt ảnh có thể "trông" như cắt thời gian, nhưng chúng không thực sự. Hoạt ảnh jQuery di chuyển một bước trong hoạt ảnh và sau đó đặt bộ hẹn giờ trong một khoảng thời gian ngắn trong tương lai và chúng quay trở lại hệ thống. Khi sự kiện hẹn giờ đó kích hoạt, jQuery thực hiện bước tiếp theo trong hoạt ảnh và v.v.Khi một sự kiện hẹn giờ kích hoạt, nó đặt một sự kiện hẹn giờ vào hàng đợi sự kiện javascript. Nếu không có javascript hiện đang chạy, gọi lại hẹn giờ được bắt đầu ngay lập tức. Nếu javascript hiện đang chạy, thì sự kiện hẹn giờ chỉ nằm trong hàng đợi sự kiện cho đến khi chuỗi javascript hiện tại kết thúc. Khi chuỗi đó kết thúc, javascript sẽ tìm trong hàng đợi sự kiện để xem liệu có bất kỳ sự kiện nào đang chờ đợi hay không. Nếu có, sau đó nó gọi sự kiện gọi lại.

Như vậy, thực sự không có thời gian cắt cho các phần khác nhau của javascript. Hai đoạn mã muốn chạy không phải là một số chu trình CPU như sẽ xảy ra với các luồng thực trong mã gốc. Trong javascript một đoạn mã chạy cho đến khi nó được thực hiện và sau đó sự kiện tiếp theo có thể được bắt đầu. Trong những thứ như hoạt ảnh dựa trên javascript, việc cắt thời gian có thể được mô phỏng một chút bằng cách thực hiện một lượng công việc nhỏ và sau đó đặt hẹn giờ cho một số thời gian trong tương lai và quay lại hệ thống. Ngay sau khi bạn hoàn thành việc thực hiện, một số đoạn javascript khác có thể chạy, nhưng nó cũng sẽ chạy cho đến khi nó được thực hiện. Nếu tất cả các mẩu javascript chỉ làm một lượng nhỏ công việc và sau đó thiết lập một bộ đếm thời gian cho tác phẩm tiếp theo của họ, thì tất cả chúng có thể hợp tác và nó sẽ xuất hiện như có thời gian cắt, nhưng nó chỉ hoạt động vì sự hợp tác giữa chúng. Nếu một chức năng như my_cpu_heavy_function xuất hiện và nâng cấp CPU một lúc, thì không ai khác chạy trong thời gian đó. Hoạt ảnh sẽ dừng khi my_cpu_heavy_function đang chạy.

Một số thao tác trong trình duyệt được thực hiện bằng mã gốc trong trình duyệt (chẳng hạn như gọi ajax, tải hình ảnh, v.v ...). Các tác vụ không đồng bộ này có thể tiến hành ở chế độ nền trong khi javascript đang chạy, nhưng chúng sẽ không thông báo javascript cho đến khi chuỗi kết thúc thực thi javascript kết thúc và một chuỗi mới có gọi lại thông báo có thể được bắt đầu.

Ví dụ: giả sử chúng tôi có hình ảnh mất 1 giây để tải và chức năng chuyên sâu của CPU mất 5 giây để chạy. Sau đó chúng tôi có mã này:

var img = new Image(); 
img.onload = function() { 
    alert("image is loaded now"); 
} 
img.src = "xxx.jpg"; 
longFunctionThatTakesFiveSecondsToRun(); 

Khi chúng tôi chạy mã này, mặc dù hình ảnh chỉ mất 1 giây để tải nội trong trình duyệt, xử lý onload sẽ không được gọi cho đến khi longFunctionThatTakesFiveSecondsToRun() được thực hiện chạy 5 giây sau . Nó phải chờ cho đến khi luồng thực hiện hiện tại được thực hiện trước khi sự kiện onload có thể được xử lý.

Nếu bạn muốn biết thêm về javascript hàng đợi sự kiện và các hoạt động không đồng bộ, nhìn thấy những câu trả lời liên quan:

How does JavaScript handle AJAX responses in the background?

Race conditions with JavaScript event handling?

Can JS event handlers interrupt execution of another handler?

Do I need to be concerned with race conditions with asynchronous Javascript?