How to cancel the setTimeout event-mouse scroll?

There is a list generated by Ajax from elements of li. It has a scrolling due to large size. When the user starts to scroll you need to handle this event and cancel the execution of the script via setTimeout. The problem I have is: how to register it? The list is created dynamically and then in the html add event. And what event is necessary in this case? onMouseMove or something?
March 12th 20 at 08:42
1 answer
March 12th 20 at 08:44
Solution
var timeout = setTimeout(handler, duration);

element.addEventListener('scroll', scrollHandler);

function scrollHandler() {
clearTimeout(timeout);
 element.removeEventListener('scroll', scrollHandler);
}

or:
var timeout = setTimeout(handler, duration);

element.addEventListener('scroll', function() {
 if (timeout) {
clearTimeout(timeout);
 timeout = null;
}
});


where element is the element on which you want to handle the scroll event.

In the first case, the listener for the scroll event, the first event is canceled. The second remains, and if the timer is reset, at the scroll again it will be cancelled.
Where to insert this code? In the head or in the class scripts? - Merl_Goldner73 commented on March 12th 20 at 08:47
On location: setTimeout(handler, duration); should be your call to setTimeout. - Ocie_Durg commented on March 12th 20 at 08:50
@Merl_Goldner73, it's obvious. On location: setTimeout(handler, duration); should be your call to setTimeout. - Ocie_Durg commented on March 12th 20 at 08:53
Not so obvious. In scripts does not work. Will have to head to push that not very good for me. - Merl_Goldner73 commented on March 12th 20 at 08:56
@Merl_Goldner73, if it throws an error message, it means doing something wrong.
Show your code. - Ocie_Durg commented on March 12th 20 at 08:59
I need to handle the event in a particular area - say ul li. But rather on the scroll bar this area - Merl_Goldner73 commented on March 12th 20 at 09:02
@Merl_Goldner73, replace the window on a desired item. Response updated. - Ocie_Durg commented on March 12th 20 at 09:05
ReferenceError: element is not defined on the second option. First did not notice the change. And where in your reply window? - Merl_Goldner73 commented on March 12th 20 at 09:08
@Merl_Goldner73, instead of the element you have to substitute your item.

You would instead ask questions, the answers to which are barely able to understand, would spend better time learning the basics of JavaScript. - Ocie_Durg commented on March 12th 20 at 09:11
JS in my task comes once a year. Once a year and learn. What's my element? The dynamic list - how to assign the item to? - Merl_Goldner73 commented on March 12th 20 at 09:14
@Merl_Goldner73,
document.getElementById
document.querySelector - Ocie_Durg commented on March 12th 20 at 09:17
He has no id. Ajax creates. The same for querySelector. How to use it to intercept the element that is scrolling? There is only a static div, inside of which is formed the list. But it can not be scroll bars.
container.style.display = "none";

 var list = JSON.parse(jsonStr);
 var ul = document.createElement("ul");

 for (var i = 0; i < list.length; i++ ) {
 var li = document.createElement("li");
 li.dataset.value = list[i]["value"];
 if (/[a-z]+/.test(list[i]["value"])) {
 li.innerHTML = list[i]["caption"]+' : '+list[i]["value"];
}
else
{
 li.innerHTML = list[i]["caption"];
}
ul.appendChild(li);
}
 container.replaceChild(ul, container.firstChild);
 container.style.display = "block";


Inside this thing I need to handle events - Merl_Goldner73 commented on March 12th 20 at 09:20
@Merl_Goldner73, elements are created in the snippet of code that you just sent. If you at least knew a bit of JavaScript that you have, by the way, is specified in the spec at Freelansim, you would have seen it.

You even here the element is not necessary to receive, you create.

Hire a freelancer, it will solve the problem without dire consequences. Well, for 16 years in the industry, the JavaScript can be 50 times from scratch to check to the level of a JS ninja.

For your problem it's simple:
var ul = document.createElement("ul");
ul.addEventListener('scroll', scrollHandler);

function scrollHandler() {
clearTimeout(timeout);
 ul.removeEventListener('scroll', scrollHandler);
}


Of course before doing this we need to define a variable timeout. - Ocie_Durg commented on March 12th 20 at 09:23
I'm trying to solve the problem. Resorting to the help of the community. Thanks for the advice, but I don't program in JS. The level of knowledge I have as was the initial and remains. I've been programming in PHP, however, there happens that the brain falls into a stupor. You also have the choice to answer or not. In any case, let's each other life is not to teach, because page I was doing these projects that many here never dreamed of. - Merl_Goldner73 commented on March 12th 20 at 09:26
@Merl_Goldner73, but it's nothing that you violate rules of the community? Here it is forbidden to publish the job. You are too lazy to learn JavaScript and you take off part of the work here. On this site help people, not do their job for them. - Ocie_Durg commented on March 12th 20 at 09:29
Job? This script for my personal project. And I don't take off part of the work - I just want you to help with one small problem, which I so would, but faster. This script I have changed it so that there is only a trace remained, but with all these elements-objects, I always have the trouble was, therefore, stalled. - Merl_Goldner73 commented on March 12th 20 at 09:32
By the way the last option is also not working. The timeout isn't cancelled. - Merl_Goldner73 commented on March 12th 20 at 09:35
@Merl_Goldner73,
I'm just asking to help with one small problem, which I so would, but faster.

I seriously doubt that you would have decided yourself given the fact that you do not understand what is written in the snippet of code that you took off.
Just take your time learning the basics of JavaScript and at least confidently code to be read and correctly understand it. A good place for this here.

By the way the last option is also not working. The timeout isn't cancelled.

It should work. It looks like you're using it wrong.

Demo with option 1
Demo option 2 - Ocie_Durg commented on March 12th 20 at 09:38
So I demo'd without anyone's help built. There are static elements, written in html. I do not deny that do not understand - and therefore asked for help. However, it is likely you don't understand: where you need scrolling, cancels the timeout. - Merl_Goldner73 commented on March 12th 20 at 09:41
So I have half the code he wrote. How not to understand? This part works great and the questions to it. Why to comment? I even put the abolition of the setTimeout when you enter letters in the input field. The problem I have only to understand how to handle the event when best personal Finance this list. As long as your options didn't work. - Merl_Goldner73 commented on March 12th 20 at 09:44
@Merl_Goldner73,
There are static elements, written in html.

So there is even simpler. You just add the id element in the html and then get it in js using document.getElementById('idВашегоЭлемента');.
In my demo, if not noticed, such as static elements.

You just need to find the element which appears scrolling can hang the listener. - Ocie_Durg commented on March 12th 20 at 09:47
Edrid-anhydride! What is html? In html there are only block-wrapper. I tried events to hang - is not working.

<div class="list-wrap" onMouseScroll="cleanTimer();" (I tried to substitute the cleaning function timer)>
the <ul></ul>
 </div>
- Merl_Goldner73 commented on March 12th 20 at 09:50
@Merl_Goldner73,
What is html? In html there are only block-wrapper.

First, you write that you're static elements, and now this. Decide already.

onMouseScroll? How do you do this? Invented themselves?

I'm not even having seen your code, Wang, list-wrap this is the container of the JS code and you can just write that code:
container.addEventListener('scroll', cleanTimer); - Ocie_Durg commented on March 12th 20 at 09:53
OnMouseOver gets triggered unexpectedly at the div list-wrap. I think that may be it. - Merl_Goldner73 commented on March 12th 20 at 09:56
Your last method is generally the timeout is killed. Stopped until onMouseOver. Although understanding is not added again. - Merl_Goldner73 commented on March 12th 20 at 09:59
But now again the sheet hangs and if there is no selection, the entire screen is closed. Maybe just restart the timeout? - Merl_Goldner73 commented on March 12th 20 at 10:02
@Merl_Goldner73, problems should be solved in a direct way, and not just how. This event does scroll not connected, it is triggered on hover. And to handle events in the html is very bad form. - Ocie_Durg commented on March 12th 20 at 10:05
And so they did. First, clear the timeout, then restart the script hiding. The topic is closed. Thank you all! - Merl_Goldner73 commented on March 12th 20 at 10:08
It is clear from the tone. However, your option not working. Timeout is not chopped off - Merl_Goldner73 commented on March 12th 20 at 10:11
Amendment. Moved to another location and it worked! Now a personal thank you, Anton! Added restart timeout concealment. Century live - and be treated! - Merl_Goldner73 commented on March 12th 20 at 10:14

Find more questions by tags JavaScript