Обработчик событий изменений и ключей в JQuery

Question

Я использую JQuery, CakePHP и Mysql в своем приложении. У меня есть код, подобный приведенному ниже, в котором инструкции представляют собой текстовое поле, которое при вводе будет отображаться на панели дисплея.

$(".TextFieldSettings #instructions").keyup(function (){
  instr=$(".TextFieldSettings #instructions").val();
  $("#displayPanel .fieldInstructions"+counter).html(instr).show();
});//Text field instructions keyup

Этот код хорошо работает.

Edit: Если я изменю значение в инструкциях Textbox, значение keyup должно отображаться на панели дисплея. Значит, пока мне нужно последнее измененное значение в instr для вставки в базу данных. Как я могу это сделать?

Answer 1

В зависимости от того, сколько контента хранятся в ваших инструкциях / как часто нажимаются клавиши, я думаю, что обновление базы данных при каждом нажатии клавиш немного излишне. Может обновлять базу каждые 5 секунд или что-то? при каждом нажатии клавиши запуск / сброс функции setTimeout.

Кроме того, вы можете заменить ваш вызов, чтобы вытащить текстовое значение просто $ (это);

$(".TextFieldSettings #instructions").keyup(function (){
    var instr = $(this).val();
    $("#displayPanel .fieldInstructions"+counter).html(instr).show();

    // Update database
    $.ajax({ 
              method: 'POST', 
              url: 'path/to/a/script_file/executing_the_sql.ext',
              data: { 'str': escape(instr.replace(/\n/g,'<br />')) },
              success: function(){},
              error: function(e){ alert(e.responseText); }
    });

});//Text field instructions keyup

Answer 2

Вы можете отложить операцию:

$(".TextFieldSettings #instructions").keyup(function (){
  setTimeout(function () {
    var instr=$(".TextFieldSettings #instructions").val();
    $("#displayPanel .fieldInstructions"+counter).html(instr).show();
  }, 1);
});//Text field instructions keyup

Таким образом, при выполнении функции введенное значение обновляется нажатием клавиши.