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

Я хочу использовать 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>

foo() -> foo, в противном случае вы выполняете функцию немедленно вместо того, чтобы указывать ссылку на функцию для выполнения позже.

— 18.10.2018 08:18

Кажется, вы также возвращаете функцию из throttle, но никогда ее не выполняете. Глядя на код, кажется, что вы действительно хотите выполнить $('#button').click(throttle(foo, 50000));, поэтому вы делаете возвращаемую функцию обработчиком.

— 18.10.2018 08:22

Ах, спасибо! Но почему это: $('#button').click(throttle(foo, 50000)); работает, а "var onClick = function() { throttle(foo, 50000); }; $('#button').click(onClick);" нет?

— 18.10.2018 08:31

Потому что throttle(foo, 50000) по-прежнему возвращает ссылку на функцию, которую нужно выполнить позже. По сути, происходит то, что ваш обработчик выполняет var functionReference = throttle(foo, 50000), а затем ничего не делает, вместо вызова functionReference(). Имея функцию, которая просто вызывает другую функцию без аргументов (помните, что функция, которую вы получаете, не принимает никаких аргументов, так что вы как бы получаете немного запаха кода, giveCallback(() => otherFunc()) проще выразить как giveCallback(otherFunc), поэтому я предложил напрямую передать это functionReference как обработчик.

— 18.10.2018 10:52

javascript throttling

18.10.2018 08:14

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

4 096

Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Ответ принят как подходящий

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

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

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

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

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

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

// 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>

18.10.2018 08:28

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

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

var onClick = throttle(foo, 50000);

18.10.2018 08:33

Я знаю, что вопрос старый.

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

function throttle( fn, wait ){
  let lastCall = 0;
    return function(){
    if ( Date.now() - lastCall > wait  ){
      lastCall = Date.now()
      fn()
    }
  }
}

var counter = 0

var count = () => document.querySelector("#count").textContent = ++counter

window.addEventListener('scroll', throttle( count, 1000 ) )