Дросселирование входного сигнала с помощью jquery и lodash

Question

Проблема: использование _.throttle Я теряю способность пройти $(this) к целевой функции.

Я использую JQuery, чтобы посмотреть 3 отдельных input поля.

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

Пример:

$("input").on("change input paste keyup",
    _.throttle( output( $(this).val() )
));

Результат: возникает ошибка jQuery, потому что this не определено

Примечания: Переезд _.throttle() анонимной функции, вызываемой on() просто стреляет output немедленно.

Я пробовал разные настройки, но ни одна из них не сработала. Я чувствую, как будто я пропускаю что-то очень очевидное.

Answer 1

Ответ: Передача ссылки на функцию сохраняет использование this,

пример:

function output() {
  var x = $(this).val();
  $("#output").val(x);
}

// Watch input and throttle calls to output
$("input").on("change input paste keyup", _.throttle(output, 350));

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />

<div class="form-group">
  <input class="form-control" placeholder="Type here" />
</div>
<div class="form-group">
  <textarea id="output" rows=4 class="form-control" placeholder="Output here"></textarea>
</div>


<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.5.0/lodash.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Источник: я google-fu'd еще немного и нашел ответ в статье, которую я уже просмотрел, но не "прочитал".

---

@ Michael: К сожалению, ваш код не работает по первому принципу. Вы не можете объявить переменную так, как вы это сделали, в том месте, где вы это сделали.

Я предполагаю, что вы, возможно, хотели сказать либо это:

// this will not work
$("input").on("change input paste keyup",
    self = this,
    // this throws an error
    _.throttle( output( $(self).val() ) )
);

или это:

//This does not work either
$("input").on("change input paste keyup", function(){
    self = this;
    // this still throws an error
    _.throttle( output( $(self).val() ) );
});

Они оба выдают одну и ту же ошибку.

Answer 2

Кэш this

$("input").on("change input paste keyup",
    var self = this;
    _.throttle( output( $(self).val() )
));

Answer 3

Используйте метод bind, чтобы поймать значение, которое вы хотите передать:

$("input").on("change input paste keyup", function() {
  var value = $(this).val();
  var boundOutput = output.bind(this, value);
  _.throttle( boundOutput );
});