Làm màn hình spinner loading... trong lúc chờ server response (asynchronous)

#1

Xin chào, Em dùng ajax, axios,… để featch data, trong lúc chờ response em muốn màn hình hiện animation loading thì làm như thế nào ạ? Cách em làm như này:

  • Step 1 : tạo biến A = null.
  • Step 2 : fetch data bằng ajax, axios,…
  • Step 3: tạo 2 giao diện : (1) là loading, (2) là list tiem
  • Step 4 : (if A == null) thì hiện (1) else thì hiện (2)

Không biết có hàm nào hỗ trợ không? Em cảm ơn!

#2

Trong lúc Ajax load thì bạn có cho phép user làm gì khác không hay là buộc phải đợi load xong? Nếu chỉ đợi thì khá đơn giản là khi state chưa change sang trạng thái ready thì bạn:

document.getElementById(‘my-spinner’).style.display = ‘block’; (ban đầu cho cái my-spinner của bạn display = ‘none’)

Khi trạng thái là ready thì bạn cho cái my-spinner của bạn biến đi bằng cách đặt lại nó display = ‘none’

Cái my-spinner của bạn đơn giản là một div có z-index lớn (hơn các element hiện đang để nó nổi lên trên cùng) và có position là fixed hoặc absolute và đặt toạ độ để định vị nó ở chính giữa màn hình cho đẹp.

OK?

4 Likes
#3

Dạ cảm ơn anh,

2 cái này có gì khác nhau không anh? Trong lúc ajax load thì user vẫn làm việc khác bình thường, chỉ có phần giao diện chưa load xong là không thao tác được vì chưa có ạ

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