Người Viết : ViKiMi Editor

Sử dụng lệnh Break và Continue trong lập trình jQuery mang lại sự đa dạng lập trình Web
Như chúng ta đã biết có thể sử dụng rất nhiều lệnh hữu ích của jQuery để lập trình Website. Các lệnh chúng ta đã nói trong những phần thực hiện trước đây đều có thể mang lại những xử lý mà chúng ta có thể dễ dàng hiểu được, đó là các lệnh như for hoặc while, do while … Và để có thể thực hiện được nhiều hơn nữa buộc lòng chúng ta phải quen với các lệnh mới hơn.
Thư viện jQuery cho cung cấp cho chúng ta một cách linh hoạt.
Chúng ta có thể thoải mái thực hiện được một cách tuyệt vời hơn khi dùng những cung cấp mới này, đặc biệt với bất kỳ ai mới tiếp xúc với jQuery. Một trong những cách này mà chúng ta nên quen đó là :
+ Thực hiện lệnh Break
+ Thực hiện Continue
Đây là hai lệnh mà có lẽ không thể bỏ qua. Chúng ta có thể sử dụng những lệnh này một cách phong phú hơn khi lập trình. Cách xử lý của chúng ta hoàn toàn mang tính linh hoạt hơn.
+ Lệnh Break giúp chúng ta “Nhảy khỏi / Thoát” khỏi một lệnh vòng lặp bất kỳ trong khối lập trình. Nó hiệu quả hơn nhiều khi có những điều kiện kiểm tra, kết hợp. Và do đó chúng ta sẽ có các xử lý riêng cho từng đối tượng
+ Lệnh Continue cho phép Chúng ta thực hiện “Nhảy Qua” một lần lặp trong vòng lặp. Nhờ vậy, chúng ta có thể bỏ qua các câu lệnh trong lần lặp đó. Điều này thực sự hiệu quả khi bạn kết hợp với các điều kiện xử lý.
Vậy thực chất nó sẽ hiệu quả đến đâu? Chúng ta sẽ tham khảo qua những ví dụ đơn giản nhất để có thể hiểu được cách mà nó làm việc.
Những ví dụ cho chúng ta cái nhìn rõ nhất.
Example 1 :: Hoạt động của lệnh Break
+ Vòng lặp For sẽ được thực hiện với j == 0 , j == 1 , j ==2 ; Cho tới khi j tiếp tục được tăng lên một giá trị ( Có nghĩa j == 3 ) thì chương trình của chúng ta sẽ Thoát khỏi vòng lặp for
+ Nguyên nhân khi j == 3 thì lệnh Break sẽ được hiện và chương trình thoát khỏi vòng lặp for
if( j == 3 ) { break; }
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
var j =0;
var element_2, var_2;
var couponElements = $(".product_coupon");
for( j = 0; j < couponElements.length; j++ ) {
if( j== 0 ){
$("#welcome_to_Bee").html("Greeting Customers <b> In BEE SHOP </b>");
}
element_2 = couponElements.eq(j);
var_2 = element_2.text();
if( j == 3 ) { break; }
if( var_2 == "Get Coupons" ){
element_2.css("background-color", "red");
element_2.css("opacity", "0.8");
element_2.css("font-size", "20px");
}
}
});
});
</script>
</head>
<body>
<p id="welcome_to_Bee"> Loading ... </p>
<p id="test">These are products <b>in Bee Shop</b> .</p>
<table class="tbl_company" border="1">
<tr>
<th>Product</th>
<th>Price</th>
<th>Coupons</th>
</tr>
<tr>
<td>Quần Áo</td>
<td><p class="price_product">SALE 200000</p></td>
<td class="product_coupon">Get Coupons</td>
</tr>
<tr>
<td>Giày Dép</td>
<td><p class="price_product">SALE 300000</p></td>
<td class="product_coupon">No Coupons</td>
</tr>
<tr>
<td>Mũ Nón</td>
<td><p class="price_product">SALE 150000</p></td>
<td class="product_coupon">No Coupons</td>
</tr>
<tr>
<td>Trang Sức</td>
<td><p class="price_product">SALE 150000</p></td>
<td class="product_coupon">Get Coupons</td>
</tr>
<tr>
<td>Mỹ Phẩm</td>
<td><p class="price_product">SALE 500000</p></td>
<td class="product_coupon">Get Coupons</td>
</tr>
</table>
<br/>
<button id="btn1">Best Sale</button>
</body>
</html>
Example 2 :: Hoạt động của lệnh continue
+ Chúng ta thấy rằng tại đây có sử dụng lệnh Continue. Vậy điều gì mới sẽ xảy ra với ví dụ này?
+ Lý thuyết chúng ta có là lệnh Continue sẽ bỏ qua một lần lặp trong vòng lặp jQuery. Nhưng cụ thể ở đây là gì?
+ Thật đơn giản và dễ hiểu là :
Chương trình sẽ thực hiện tuần tự như sau
· Khi j == 0, j == 1 , j ==2 thì các lệnh trong vòng lặp sẽ được hiện đầy đủ. Tất nhiên là khi này j có giá trị khác 3 nên lệnh Continue không được xử lý
· Khi j == 3 Chương trình sẽ thực hiện lần lặp này như sau
Chương trình sẽ thực hiện các dòng lệnh
if( j== 0 ){
$(“#welcome_to_Bee”).html(“Greeting Customers <b> In BEE SHOP </b>”);
}
element_2 = couponElements.eq(j);
var_2 = element_2.text();
Và tại dòng lệnh tiếp theo, Chương trình sẽ gặp câu lệnh điều kiện
if( j == 3 ) { continue; }
Do đó lệnh Continue sẽ được gọi, Chương trình sẽ bỏ qua lần lặp này tại đây để chuyển sang lập lặn tiếp theo với j == 4. Và các lệnh tại vòng lặp tiếp theo sẽ tiêp tục được diễn ra.
· Lưu ý : Tại vòng lặp khi j == 3,
Chương trình không thực hiện các lệnh sau :
if( var_2 == “Get Coupons” ){
element_2.css(“background-color”, “red”);
element_2.css(“opacity”, “0.8”);
element_2.css(“font-size”, “20px”);
}
Bởi vì Chương trình sẽ thực hiện từ đầu cho đến khi gặp lệnh Continue thì sẽ nhảy qua lần lặp tiếp theo.
<!DOCTYPE html>
<html>
…………
for( j = 0; j < couponElements.length; j++ ) {
if( j== 0 ){
$("#welcome_to_Bee").html("Greeting Customers <b> In BEE SHOP </b>");
}
element_2 = couponElements.eq(j);
var_2 = element_2.text();
if( j == 3 ) { continue; }
if( var_2 == "Get Coupons" ){
element_2.css("background-color", "red");
element_2.css("opacity", "0.8");
element_2.css("font-size", "20px");
}
}
Như vậy, Chúng ta có thể dễ dàng hiểu cách hoạt động của lệnh Break và Continue trong jQuery. Thực sự cách sử dụng không mấy khó khăn, mà hiệu quả khi tạo ra các xử lý linh hoạt thì lại vô cùng cao. Giúp chúng ta có một phương pháp mới để tạo ra các điều kiện kiểm tra và xử lý cho chương trình.
+ Đặc biệt khi bạn muốn ta ra sự linh hoạt với nhiều hình thức khách hàng khác nhau hoặc nhiều hình thức hiển thị khác nhau.