Trung tâm cá nhân
sách gpt4 ai đã đi

Một cuộc thảo luận ngắn gọn về chức năng điều chỉnh JavaScript và chống rung

In lại Tác giả:qq735679552 Thời gian cập nhật: 2022-09-29 22:32:09 26 4
mua khóa gpt4 Nike

CFSDN nhấn mạnh vào việc tạo ra giá trị thông qua mã nguồn mở. Chúng tôi cam kết xây dựng một nền tảng chia sẻ tài nguyên để mọi người làm CNTT có thể tìm thấy thế giới tuyệt vời của riêng mình tại đây.

Bài đăng trên blog CFSDN này thảo luận ngắn gọn về các chức năng điều chỉnh JavaScript và chống rung. Bài đăng được tác giả thu thập và biên soạn. Nếu bạn quan tâm đến bài viết này, hãy nhớ thích nó.

ý tưởng.

Chức năng điều tiết.

Thực hiện phương thức đã truyền theo các khoảng thời gian cố định.

Mục đích là ngăn chặn chức năng thực thi quá nhanh và ảnh hưởng đến hiệu suất. Điều này thường gặp trong các chức năng liên kết với các sự kiện cuộn và di chuyển chuột.

Chức năng chống rung.

Đối với những người đã tiếp xúc với phần cứng, có thể dễ hiểu hơn rằng khi nhấn một nút phần cứng, người dùng nhấn nút trong các khoảng thời gian khác nhau, điều này sẽ kích hoạt các dao động dòng điện nhiều lần. Thêm chức năng chống rung sẽ chỉ kích hoạt một lần, ngăn ngừa các sự cố do dao động dòng điện vô nghĩa gây ra.

Tại sao chúng ta cần phải khử nhiễu nút? Các nút cơ học không phải lúc nào cũng tiếp xúc khi được nhấn, đặc biệt là các công tắc cơ học có lưỡi gà, mở và đóng nhiều lần tại thời điểm tiếp xúc cho đến khi trạng thái công tắc thay đổi hoàn toàn.

Khi áp dụng cho giao diện người dùng, một kịch bản phổ biến là truy vấn/tìm kiếm/xác minh được kích hoạt sau một khoảng thời gian sau khi hành động nhập vào hộp nhập kết thúc, thay vì kích hoạt mỗi khi nhập một từ, dẫn đến các truy vấn ajax vô nghĩa, v.v. hoặc hàm được liên kết với việc điều chỉnh kích thước cửa sổ thực sự chỉ cần thực hiện hành động sau khi kích thước cửa sổ cuối cùng được cố định.

Tự mình nhận ra.

Chức năng chống rung.

Điểm mấu chốt là handle của hàm delay sẽ bị xóa mỗi lần nó được kích hoạt. Chỉ có trigger cuối cùng sẽ không xóa handle, vì vậy trigger cuối cùng sẽ đợi 1 mặc định để thực thi hàm tham số f được truyền vào bởi debounce. Hàm closure được trả về bên trong debounce là hàm thực sự được gọi và kích hoạt mỗi lần, không phải hàm f gốc, vì vậy các đối số ở đây lấy các đối số trong biến môi trường hàm closure và truyền nó cho f khi thực thi f, và lấy nó bên ngoài hàm setTimeout.

?
1
2
3
4
5
6
7
8
9
10
11
12
13
hãy để debounce = Chức năng (f, khoảng = 1000) {
  hãy để handler = vô giá trị ;
  trở lại Chức năng () {
   nếu như (người xử lý) {
   clearTimeout(trình xử lý);
   }
   hãy để arg = các đối số;
   trình xử lý = setTimeout( Chức năng () {
   f.áp dụng( cái này , đối số);
   clearTimeout(trình xử lý);
   }, khoảng thời gian)
  }
  }

ứng dụng

?
1
2
3
4
hãy để input = document.querySelector( '#đầu vào' );
  đầu vào.addEventListener( 'đầu vào' , gỡ bỏ( Chức năng (và) {
  console.log( "Đầu vào của bạn là" ,e.target.value)
  }))

Một triển khai nâng cao hơn cũng sẽ xem xét, với leading và trailing làm tham số, liệu có nên thực hiện hàm một lần ở đầu và loại bỏ jitter tiếp theo hay không, hoặc thực hiện hàm ở cuối và loại bỏ jitter trước đó, như trong ví dụ của tôi ở đây. Điều này sẽ được phân tích chi tiết sau khi phân tích hàm chống rung loadash.

Chức năng điều tiết.

?
1
2
3
4
5
6
7
8
9
10
11
12
hãy để ga = Chức năng (f,khoảng cách = 300){
   để lastCall = 0;
   trở lại Chức năng (){
   hãy để bây giờ = Date.now();
   hãy để ellapped = now - lastCall;
   nếu như (dấu < khoảng cách){
    trở lại
   }
   f.áp dụng( cái này ,lập luận);
   lastCall = Ngày.hiện tại();
   }
  }

Khi hàm closure được gọi liên tục, nó sẽ ghi lại khoảng thời gian từ lần gọi cuối cùng. Nếu khoảng thời gian nhỏ hơn thời gian do hàm điều chỉnh đặt, nó sẽ trả về trực tiếp mà không thực thi hàm được gói thực tế f. Chỉ khi khoảng thời gian lớn hơn khoảng cách thời gian do hàm điều chỉnh đặt, f mới được gọi và thời gian gọi được cập nhật.

ứng dụng

?
1
2
3
4
tài liệu.addEventListener( 'cuộn' , bướm ga( Chức năng (và) {
  //Logic để xác định có nên cuộn xuống dưới cùng hay không
  console.log(e,document.documentElement.scrollTop);
  }));

Phân tích mã nguồn lodash.

Trên đây là cách triển khai cơ bản và đơn giản nhất của chức năng chống rung điều tiết. Tiếp theo, chúng ta hãy phân tích chức năng chống rung điều tiết trong thư viện lodash.

Sử dụng chức năng điều tiết.

?
1
$(cửa sổ).trên( 'cuộn' , _.debounce(làmCái gì đó, 200));
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
hai mươi mốt
hai mươi hai
hai mươi ba
hai mươi bốn
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
Chức năng debounce(func, wait, options) {
  khác nhau cuối cùngArgs,
   cuối cùng,
   kết quả,
   timerId,
   thời gian gọi cuối cùng = 0,
   lastInvokeTime = 0,
   dẫn đầu = SAI ,
   Chờ tối đa = SAI ,
   theo sau = ĐÚNG VẬY ;
 
  nếu như ( loại của hàm != 'chức năng' ) {
   ném mới Lỗi loại(FUNC_ERROR_TEXT);
  }
  chờ = chờ || 0;
  nếu như (isObject(tùy chọn)) {
   dẫn đầu = !!tùy chọn.dẫn đầu;
   Chờ tối đa = 'chờ đợi tối đa' TRONG tùy chọn && Math.max((options.maxWait) || 0, chờ);
   theo sau = 'theo sau' TRONG tùy chọn ? !!options.trailing : theo sau;
  }
 
  Chức năng invokeFunc(thời gian) {
   khác nhau args = lastArgs,
   thisArg = lastThis;
 
   lastArgs = lastThis = không xác định;
   lastInvokeTime = thời gian;
   kết quả = func.apply(thisArg, args);
   trở lại kết quả;
  }
 
  Chức năng leadingEdge(thời gian) {
   console.log( "leadingEdge đặt thời gian chờ" )
   // Thiết lập lại bất kỳ bộ đếm thời gian `maxWait` nào.
   lastInvokeTime = thời gian;
   // Bắt đầu bộ đếm thời gian cho cạnh sau.
   timerId = setTimeout(timerExpired, chờ);
   // Gọi cạnh trước.
   trở lại dẫn đầu ? invokeFunc(thời gian) : kết quả;
  }
 
  Chức năng remainingWait(thời gian) {
   khác nhau timeSinceLastCall = thời gian - lastCallTime,
   timeSinceLastInvoke = thời gian - lastInvokeTime,
   kết quả = chờ - thời gianKể từ lần gọi cuối;
   console.log( "còn lạiChờ" ,kết quả)
   trở lại Chờ tối đa === SAI ? kết quả: Math.min(result, maxWait - timeSinceLastInvoke);
  }
 
  Chức năng shouldInvoke(thời gian) {
   console.log( "nênGọi" )
   khác nhau timeSinceLastCall = thời gian - lastCallTime,
   timeSinceLastInvoke = thời gian - lastInvokeTime;
   console.log( "thời gian" ,thời gian, "Thời gian gọi cuối cùng" ,cuộc gọi cuối cùng, "thời gianKểTừCuộcGọiCuối Cùng" ,thời gianKểTừCuộcGọiCuối Cùng)
   console.log( "thời gian" ,thời gian, "Thời gian gọi cuối cùng" ,lastInvokeTime, "thời gianKểTừLầnGọiCuối" ,thời gianKểTừLầnGọiCuối)
   console.log( "nên?" ,(!lastCallTime || (thời gianKể từ cuộc gọi cuối cùng >= chờ) ||
   (thời gianKểTừCuộcGọiCuối Cùng < 0) || (maxWait !== SAI && timeSinceLastInvoke >= maxWait)))
   // Hoặc đây là cuộc gọi đầu tiên, hoạt động đã dừng lại và chúng tôi đang ở
   // cạnh sau, thời gian hệ thống đã quay ngược lại và chúng tôi đang xử lý
   // đó là cạnh sau, nếu không chúng ta đã đạt đến giới hạn `maxWait`.
   trở lại (!lastCallTime || (timeSinceLastCall >= chờ) ||
   (thời gianKểTừCuộcGọiCuối Cùng < 0) || (maxWait !== SAI && timeSinceLastInvoke >= maxWait));
  }
 
  Chức năng hẹn giờ Hết hạn() {
   console.log( "hết giờ" )
   khác nhau thời gian = Ngày.hiện tại();
   nếu như (nênGọi(thời gian)) {
   trở lại trailingEdge(thời gian);
   }
   console.log( "Khởi động lại bộ đếm thời gian." ,thời gian,còn lạiChờ(thời gian))
   // Khởi động lại bộ đếm thời gian.
   console.log( "timerExpired đặt thời gian chờ" )
   timerId = setTimeout(timerExpired, remainingWait(thời gian));
  }
 
  Chức năng trailingEdge(thời gian) {
   xóa thời gian chờ(timerId);
   timerId = không xác định;
 
   // Chỉ gọi nếu chúng ta có `lastArgs` có nghĩa là `func` đã được
   // đã bị nảy ít nhất một lần.
   console.log( "theo sau" , theo sau, "lastArgs" ,lastArgs)
   nếu như (theo sau && lastArgs) {
   trở lại invokeFunc(thời gian);
   }
   lastArgs = lastThis = không xác định;
   trở lại kết quả;
  }
 
  Chức năng Hủy bỏ() {
   nếu như (timerId !== không xác định) {
   xóa thời gian chờ(timerId);
   }
   lastCallTime = lastInvokeTime = 0;
   lastArgs = lastThis = timerId = không xác định;
  }
 
  Chức năng xả() {
   trở lại timerId === không xác định ? kết quả: trailingEdge(Date.now());
  }
 
  Chức năng đã bị trả lại() {
   khác nhau thời gian = Ngày.bây giờ(),
   isInvoking = shouldInvoke(thời gian);
   console.log( "thời gian" ,thời gian);
   console.log( "đang gọi" ,isInvoking);
   lastArgs = đối số;
   cuối cùngĐây = cái này ;
   lastCallTime = thời gian;
 
   nếu như (đang gọi) {
   nếu như (timerId === không xác định) {
    trở lại leadingEdge(thời gian gọi cuối cùng);
   }
   // Xử lý lệnh gọi trong một vòng lặp chặt chẽ.
   xóa thời gian chờ(timerId);
   console.log( "đặt thời gian chờ" )
   timerId = setTimeout(timerExpired, chờ);
   trở lại invokeFunc(thời gian gọi cuối cùng);
   }
   trở lại kết quả;
  }
  debounced.cancel = hủy;
  debounced.flush = xả;
  trở lại bị dội lại;
  }

tham khảo .

https://css-tricks.com/debouncing-throttling-explained-examples/ .

https://github.com/lodash/lodash/blob/4.7.0/lodash.js#L9840 .

https://jinlong.github.io/2016/04/24/Debouncing-and-Throttling-Explained-Through-Examples/ .

Trên đây là thảo luận ngắn gọn về các chi tiết của JavaScript throttling và chức năng chống rung. Để biết thêm thông tin về JavaScript throttling và chức năng chống rung, vui lòng chú ý đến các bài viết liên quan khác của tôi! .

Liên kết gốc: https://juejin.im/post/6864556879902130183?utm_source=tuicool&utm_medium=referral .

Cuối cùng, bài viết này về một cuộc thảo luận ngắn gọn về JavaScript throttling và chức năng chống rung kết thúc tại đây. Nếu bạn muốn biết thêm về một cuộc thảo luận ngắn gọn về JavaScript throttling và chức năng chống rung, vui lòng tìm kiếm các bài viết CFSDN hoặc tiếp tục duyệt các bài viết liên quan. Tôi hy vọng bạn sẽ ủng hộ blog của tôi trong tương lai! .

26 4 0
Bài viết được đề xuất: Triển khai C++ của LeetCode (75. Sắp xếp màu)
Bài viết được đề xuất: Ví dụ mã lệnh cài đặt và cấu hình Docker
Bài viết được đề xuất: Giới thiệu về các hàm chuyển đổi đối tượng toString() và valueOf() trong JavaScript
Bài viết được đề xuất: Triển khai C++ của LeetCode (74. Tìm kiếm ma trận hai chiều)
qq735679552
Hồ sơ cá nhân

Tôi là một lập trình viên xuất sắc, rất giỏi!

Nhận phiếu giảm giá Didi Taxi miễn phí
Mã giảm giá Didi Taxi
Các bài viết nóng hổi trên toàn bộ trang web
Giấy chứng nhận ICP Bắc Kinh số 000000
Hợp tác quảng cáo: 1813099741@qq.com 6ren.com