Chức năng cập nhật trong JavaScript

Tuần trước, tôi đang thực hiện một triển khai đơn giản là cập nhật giỏ hàng cho một trang web, giao diện người dùng được viết bằng html/javascript. Tóm tắt - khi số lượng của một mặt hàng trong giỏ hàng được sửa đổi, khách hàng có thể nhấn nút cập nhật giỏ hàng để cập nhật cơ sở dữ liệu giỏ hàng, sau đó cần tính toán lại tổng giá trị của đơn đặt hàng và làm mới trang với tổng số mới

Giải pháp đơn giản, chỉ cần duyệt qua các mặt hàng trong giỏ hàng, cập nhật cơ sở dữ liệu và tính toán lại tổng số. Sau đó làm mới trang

Sử dụng Javascript và một mảng. phương thức forEach()

function updateCart( items ) {
	items.forEach( function( item ) {
		updateToCart( item.id, item.quantity ); // update database
	});
	// calculate the new totals
	// refresh page
}

function updateToCart( id, quantity ) {
    $.ajax( {
            url: "cart/update",
            type: "POST",
            data: JSON.stringify( {"id": id, "quantity": quantity} ),
            success: function ( data, textStatus, jqXHR) {
            console.log( 'Item updated: ' + id + ', ' + textStatus );
        },
        error: function ( jqXHR, textStatus, errorThrown ) {
            console.error( 'Could not update item: ' + id + ', due to: ' + textStatus + ' | ' + errorThrown);
        }
    });
}

Ngoại trừ…

Chúng tôi đang sử dụng yêu cầu ajax với jQuery để cập nhật cơ sở dữ liệu giỏ hàng. Vòng lặp forEach sẽ chỉ lặp đi lặp lại và hoàn thành, và phần còn lại của mã sẽ được thực thi ngay cả khi cơ sở dữ liệu vẫn đang được cập nhật hoặc thậm chí tệ hơn là không cập nhật được

Tính toán lại tổng số có thể không chính xác hoặc thậm chí tệ hơn. Điều này thể hiện chính xác thời điểm không sử dụng phương thức forEach trên Mảng trong javascript

TRONG JAVASCRIPT THƯỞNG THỨC SỬ DỤNG Mảng. CÁC PHƯƠNG PHÁP FOREACH() GỌI CÁC CHỨC NĂNG KHÔNG ĐỒNG BỘ

Thông thường, một phương thức forEach trong javascript là đồng bộ. Nhưng nếu phần thân của phương thức forEach gọi một hàm không đồng bộ, thì phương thức forEach có thể hoàn thành trước khi các hàm không đồng bộ hoàn thành

Để tránh sự phân phối này với phương thức forEach, hãy tạo một hàm gọi lại để gọi hàm không đồng bộ và sử dụng một phương tiện khác để kết thúc gọi lại và tiếp tục thực thi mã thông thường. Câu lệnh if other có thể được sử dụng cho hiệu ứng này như một hình thức kiểm soát

Nếu chúng ta có một số mã yêu cầu thực thi đồng bộ và có dạng phương thức forEach này bên trong nó, thì hãy xóa phương thức forEach và tách mã bằng kiểm tra if other để kiểm tra xem tất cả các mục đã được lặp qua chưa. Có lẽ tốt nhất là chia mã thành hai chức năng. Chức năng thứ hai sẽ chỉ được gọi sau khi chức năng gọi lại hoàn thành

// function updateCart() - replace items.forEach() with callback function next()
function updateCart() {
    var cartsize = items.length;
    var idx = 0;
    next = function() {
        if (idx < cartsize) {
            // call updateToCart function passing the callback function next
            updateToCart(items[idx].id, items[idx].quantity, next);
            idx++; // increment the items counter
        } else {
            // continue execution
            recalcCartTotals();
        }
    }
    next(); // call the callback function to start the iteration
}

function updateToCart( id, quantity, next ) {
    $.ajax( {
        url: "cart/update",
        type: "POST",
        data: JSON.stringify( { "id": id, "quantity": quantity } ),
        success: function ( data, textStatus, jqXHR ) {
            console.log( 'Item updated: ' + id + ', ' + textStatus );
            next();
        },
        error: function ( jqXHR, textStatus, errorThrown ) {
            console.error( 'Could not update item: ' + id + ', due to: ' + textStatus + ' | ' + errorThrown);
            next();
        }
    });
}

Sử dụng các hàm gọi lại Javascript luôn là cách được chấp nhận để xử lý các tình huống này, nhưng hiện tại có một đối tượng mới trong Javascript, đối tượng Promise đã được tạo để xử lý các hoạt động không đồng bộ

https. // nhà phát triển. mozilla. org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise

Phương thức được sử dụng trên các đối tượng có thể lặp lại là Promise. tất cả (đối tượng có thể lặp lại)

Những lời hứa Những lời hứa…

Lời hứa. all() nhận một loạt các lời hứa và kích hoạt một cuộc gọi lại sau khi tất cả chúng được giải quyết

• Đối tượng Promise có phương thức then() cho phép bạn phản ứng với lời hứa

• Hàm gọi lại phương thức then() được kích hoạt khi lời hứa được giải quyết

• Cuộc gọi lại phương thức then() đầu tiên nhận kết quả được cung cấp bởi lệnh gọi giải quyết()

Để triển khai đối tượng Promise, nó yêu cầu mỗi lệnh gọi hàm không đồng bộ trả về giải quyết hoặc từ chối gọi lại. Nếu không có cuộc gọi lại trả lại nào được thực hiện thì đối tượng Promise không kích hoạt bất kỳ hành động nào

function updateCart() {
	console.log("Updating Cart");
	var promises = [];
	var itemRows = document.getElementById("cart-list").rows;
	for(var i = 0; i < itemRows.length; i++) {
		var id = itemRows[i].cells[2].id;
		var quantity = ItemRows[i].cells[2].getElementsByTagName('input')[0].value;
		var p = new Promise(function(resolve, reject){updateToCart(id, quantity, resolve, reject);});
		promises.push(p);
	}
	Promise.all(promises).then(function() {
		recalcCartTotals();
	});
}

function updateToCart(id, quantity, resolve, reject) {
	console.log("Sending request to update cart: item: " + id + " 	quantity: " + quantity);
	$.ajax({
		url: "cart/update",
		type: "POST",
		data: JSON.stringify({"id": id, "quantity": quantity}),
		success: function (data, textStatus, jqXHR) {
			console.log('Item updated: ' + id + ', ' + textStatus);
			return resolve();
		},
		error: function (jqXHR, textStatus, errorThrown) {
			console.error('Could not update item: ' + id + ', due to: ' + textStatus + ' | ' + errorThrown);
			return reject();
		}
	});
}

Ghi chú. không cần thiết phải trả về bất kỳ giá trị nào với hàm giải quyết hoặc hàm từ chối, nhưng nó sẽ chuyển thông tin chi tiết về lỗi dưới dạng tham số nếu được yêu cầu

Làm cách nào để tạo chức năng cập nhật trong JavaScript?

Làm cách nào để cập nhật dữ liệu bằng JavaScript?

Làm cách nào để cập nhật trường đối tượng trong JavaScript?

Làm cách nào để cập nhật hàng của bảng trong JavaScript?