Как вызвать функцию, когда определенный элемент находится в поле зрения, а также он должен запускаться только один раз

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

$(document).on('scroll',function(){
 if ($(window).scrollTop()>1200){
$('.counting').each(function() {
        $(this).prop('Counter', 0).animate({
                Counter: $(this).text()
            }, {
                duration: 2000,
                easing: 'swing',
                step: function(now) {
                $(this).text(Math.ceil(now));
            }
        })
    })
}
})

но это вызывает запуск кода при каждой прокрутке после того, как значение прокрутки превышает 1200

Используйте IntersectionObserver :)

Terry 22.05.2019 14:19

как я могу сделать это, используя только jquery?

Fraz Abbas 22.05.2019 14:21

jQuery и IntersectionObservers — это JavaScript.

showdev 22.05.2019 14:23

я не знал об этом .. спасибо :) я проверю и отвечу

Fraz Abbas 22.05.2019 14:29

Кроме того, не могли бы вы немного рассказать нам о своей цели? Вы хотите, чтобы счетчик запускался, когда он прокручивается в поле зрения?

showdev 22.05.2019 14:35

Вы пробовали: $(document).off('scroll'); ? (внутри >1200) Или просто установите флаг снаружи, который проверяет, запускался ли он уже один раз.

freedomn-m 22.05.2019 14:39
3 метода стилизации элементов HTML
3 метода стилизации элементов HTML
Когда дело доходит до применения какого-либо стиля к нашему HTML, существует три подхода: встроенный, внутренний и внешний. Предпочтительным обычно...
Формы c голосовым вводом в React с помощью Speechly
Формы c голосовым вводом в React с помощью Speechly
Пытались ли вы когда-нибудь заполнить веб-форму в области электронной коммерции, которая требует много кликов и выбора? Вас попросят заполнить дату,...
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Будучи разработчиком веб-приложений, легко впасть в заблуждение, считая, что приложение без JavaScript не имеет права на жизнь. Нам становится удобно...
Flatpickr: простой модуль календаря для вашего приложения на React
Flatpickr: простой модуль календаря для вашего приложения на React
Если вы ищете пакет для быстрой интеграции календаря с выбором даты в ваше приложения, то библиотека Flatpickr отлично справится с этой задачей....
В чем разница между Promise и Observable?
В чем разница между Promise и Observable?
Разберитесь в этом вопросе, и вы значительно повысите уровень своей компетенции.
Что такое cURL в PHP? Встроенные функции и пример GET запроса
Что такое cURL в PHP? Встроенные функции и пример GET запроса
Клиент для URL-адресов, cURL, позволяет взаимодействовать с множеством различных серверов по множеству различных протоколов с синтаксисом URL.
1
6
101
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

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

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

если я хочу запустить это только один раз, то?

Fraz Abbas 23.05.2019 06:49

@FrazAbbas Есть возможность запустить код только один раз, когда целевой элемент находится в области просмотра. Прочтите документ, в частности, о части функции обратного вызова.

dwpu 23.05.2019 12:55

Другие вопросы по теме