Регулирование функции Javascript - PullRequest
Новая
       9

Регулирование функции Javascript

0 голосов
/ 18 октября 2018

Я хочу использовать JS Throttle.Но я изо всех сил пытаюсь заставить это работать правильно.

Я попробовал код из этой статьи: https://codeburst.io/throttling-and-debouncing-in-javascript-b01cad5c8edf

Но Дроссель не работает, как предполагалось, так как каждый раз, когда я нажимаю на кнопкуодин "|"добавлен в div.Клики не были отброшены.

где ошибка?

function foo() {
	$("#respond").append("|");
}

const throttle = (func, limit) => {
  let inThrottle
  return function() {
    const args = arguments
    const context = this
    if (!inThrottle) {
      func.apply(context, args)
      inThrottle = true
      setTimeout(() => inThrottle = false, limit)
    }
  }
}

var onClick = function() {
    throttle(foo(), 50000);
};

$('#button').click(onClick);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" id="button" value="Click Me" />
<div id="respond"></div>

Ответы [ 2 ]

0 голосов
/ 18 октября 2018

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

var onClick = function() {
    throttle(foo(), 50000);
};
// TO

var onClick = throttle(foo, 50000);
0 голосов
/ 18 октября 2018

Чтобы throttle(func, limit) работал - может существовать только один экземпляр его продукта.

Проблема в том, что функция onClick в вашем примере создает новый экземпляр каждый раз, когда ее вызывают.

Это делает бессмысленной переменную inThrottle бессмысленной, так как создается новая копиядля каждого клика.

Решение состоит в том, чтобы вызывать один экземпляр непосредственно как продукт throttle(foo, 50000).

Также должен быть передан сам foo (не его продукт).

См. Практический пример ниже, а также закрытия и scope для получения дополнительной информации. 

// Foo.
const foo = (...args) => {
  $("#respond").append("|");
}

// Throttle.
const throttle = (func, limit) => {
  let inThrottle
  return (...args) => {
    if (!inThrottle) {
      func(...args)
      inThrottle = setTimeout(() => inThrottle = false, limit)
    }
  }
}

// On Click.
const onClick = throttle(foo, 1000)

// Button - Click.
$('#button').click(onClick);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" id="button" value="Click Me" />
<div id="respond"></div>
...