Question

＆＃13;

// Cart Code for Updating Database Quantity


$('.input-text').on('keydown ' , function(){

var tr_parent = $(this).closest("tr");

  setTimeout(function () {

  	 $(tr_parent).css('opacity', '0.3');
    
  
    }, 4000); 



	var input_value = $(this).val();
	var input_value_length = input_value.length;
	var product_id_update = $("#product_id").attr('data');


	if(input_value_length > 0 ) {


// Setting up time to execute jquery

  setTimeout(function () {

	$.ajax({
		url: "includes/ajax_code.php",
		data:{input_value:input_value, product_id_update : product_id_update},
		type: "POST",
		success:function(data) {

		 $(tr_parent).css('opacity', '0.9');

			
		}

	});
    
  
    }, 5000); 




}




	});

＆＃13;

这里的代码是将输入元素的不透明度设置为0.3只是为了给用户一些指示数据正在传输，我的问题是当我在AJAX的成功区域设置第二个函数setTimeout时它赢了＆＃39 ; t执行。

因此，输入始终保持不透明度或0.3，而不是在AJAX结束后保持为0.9。

Answer 1

我认为你应该在调用ajax之前立即将第一个不透明度设置为0.3，以指示某些东西开始加载。并在成功/错误/完成回调中将其设置回0.9。

$('.input-text').on('keydown change', function() {


var table_row = $(this).closest("tr");


// $(table_row).css('opacity', '0.3');
var input_value = $(this).val();
var input_value_length = input_value.length;
var product_id_update = $("#product_id").attr('data');


if (input_value_length > 0) {
    $(table_row).css('opacity', '0.3');//<-- move here
    $.ajax({
    ...
    ...
    and in success callback, set it back to 0.9...either instantly or with a slight delay, doesnt matter.

注意：看起来您正试图在每次按键时提交数据，这可能有点效率低下。我认为你应该“扼杀”这个ajax功能。当用户编辑输入时设置一个计时器，比如1秒钟。当时间用完时，输入值使用ajax发送。当用户键入另一个字母时，计时器被重置，因此，只有当用户完成键入至少一秒钟后才会触发ajax。它的简单优化。

*编辑 - 创建了jsfiddle演示，展示了应该如何完成* 演示 - http://jsfiddle.net/rainerpl/49mjkagv/

<input type="text" class="input-text">
<img src="http://www.minefornine.com/pages/tpl/front/images/ajax_loader_big.gif" style="width: 24px; float: left;display: none;" id="loader" >


$(document).ready(function() {
    var input = $('.input-text');
    var timer;
    var loader = $("#loader");
    var loadStuff = function() {
      //input changed - set opacity to 0.4 to indicate loading
        input.css("opacity", 0.4);
        loader.show();
        setTimeout(function() {
            //loading finished 
            input.css("opacity", 1);
            loader.hide();
        }, 2000);//<--simulates ajax call  
    };
    input.on('keydown ' , function() {
        if ( timer ) {clearTimeout(timer);}
        timer = setTimeout(loadStuff, 1000);;
    });
});

设置第二个setTimeout函数不会执行JQUERY和AJAX

1 个答案: