Nhờ kiểm tra giúp mình xem độ trễ do đâu mà ra

#1

Mình đang demo hiệu ứng cuộn trang ( tức là mỗi lần lăn chuột - chuyển sang một section khác).

Demo chi tiết ở đây: https://codepen.io/Hoangvan/pen/xzWjRj?editors=1010

Hướng của mình là bắt sự kiện on’wheel sau đó addClass active cho đối tượng để thực hiện hiệu ứng. Nếu cuộn chuột bình thường thì không có vấn đề gì , tuy nhiên khi ở Section Header mà cuộn chuột lên phía trên hoặc khi ở section Footer mà cuộn chuột xuống phía dưới , sau đó thực hiện lại thì hiệu ứng nó không ăn ngay mà nó bị trễ một khoảng thời gian.Mọi người thực hiện trên demo của mình sẽ thấy điều đó.

Mình không biết lý do là do đâu, mình có F12 để kiểm tra thì thấy Class Active vẫn được thực hiện chuyển ngay, nhưng hiệu ứng thì phải mất mấy giây sau mới chạy.

Mọi người giúp mình xem lý do nó ở đâu ?

Cám ơn các bạn !

1 Like
#2

Mình không rõ cuộn là cuộn thế nào? Khi mình xóa sạch đoạn JavaScript thì cuộn cũng không khác gì lúc có đoạn JavaScript cả.

1 Like
#3

là sao bạn ??? Mỗi một lần cuộn chuột là nó tự nhảy sang một section mới mà

#4

có ai rảnh không support mình với :))

#5

Không ai rảnh đâu bạn trừ khi bạn bỏ tiền ra :v

#6

Trước đây mình có tham gia một số diễn đàn, cũng có gặp một vài trường hợp kiểu như : “Các bác giúp e bài này, (hay giải đề này đề kia vv…gì gì đó y) e xin hậu tạ cái card điện thoại 50K ,100K đại loại vậy.”

Rồi cũng theo dõi comment bên dưới thì thấy hầu như mọi người đều góp ý kiểu như:

  • “Mọi người tham gia diễn đàn chủ yếu là học hỏi thêm kiến thức, trao đổi kiến thức và giúp đỡ nhau cũng là 1 cách để trau rồi và tự nâng cao kiến thức. Không vì mục đích kiếm tiền hay phần thưởng gì đâu”.

  • “Diễn đàn lập ra với mục đích là nơi học hỏi và trao đổi kiến thức chứ không phải đem ra trao đổi hay mua bán bằng tiền. Bạn không nên đưa cái đó vào đây.”

Bản thân mình cũng thấy hơi ái ngại về vấn đề này.Tất nhiên mình không áp đặt như 2 quan điểm trên là đúng, vì mỗi người có một suy nghĩ riêng và mình cũng không muốn bàn luận nhiều về vấn đề này.

Còn về vấn đề của mình, mình trước cũng học lập trình ở trung tâm nhưng học một thời gian thấy không hiệu quả và hiểu được nhiều nên sau đó mình quyết định bỏ ngang và tự tìm tài liệu học.

Không có thầy , nên nếu gặp phải rắc rối hay vấn đề gì đó, mình cũng chỉ biết tham gia vào các diễn đàn rồi hỏi - nhờ mọi người giúp đỡ - ai giúp được mình gì thì giúp , tùy vào kiến thức và khả năng của mỗi người.

Trở lại vấn đề chính của mình, hiện mình đang gặp rắc rối với bài toán trên và chưa có hướng giải quyết. Nếu bạn có cách khắc phục xin bày cho mình với . Mình xin cám ơn và hậu tạ - cụ thể ra sao bạn có thể message riêng cho mình ạ.

#7

Hi,

Có vẻ bạn tính chưa hết case. Mình không thạo js, bạn kiểm tra lại với điều kiện này xem.

 if( deltaY > 0  ) { /* wheel Down */
          if($('.active').next().is('section'))
               $('.active').removeClass('active').next().addClass('active');
          else
            return;
        }

tương tự với trường hợp wheel Up.

Code cũ của bạn:
if( deltaY > 0 && $('.active').next().is('section')) Không thỏa mãn thì .active không thay đổi vị trí => myDistance không đổi và nó tiếp tục animate ở nguyên vị trí đó. Cho tới khi hết scroll down event thì mới đến lượt scroll up nên => Trễ.

2 Likes
#8

Cái này là do sự kiện onWheel bị gọi nhiều lần, nên cần sử dụng stop() để bắt lấy sự kiện cuối cùng.

Bạn có thể tham khảo xem nó đã chạy đúng chưa:

2 Likes
#9

Dùng hiệu ứng fake mutex

3 Likes
#10

Mình không rõ là demo này có tác dụng gì nữa, Thuường thuường là để một cái button ở section xong click vào nó thì nó sẽ cuộn xuống ở section phía dưới, tiếp đó cho những section khác :slight_smile:

#11

Dùng để buộc mỗi section nằm ngang tầm mắt nhìn. Nhiều trang khóa luôn scroll dọc và bắt mousewheel.

1 Like
83% thành viên diễn đàn không hỏi bài tập, còn bạn thì sao?