js에서 여러 이벤트가 동시에 발생하는데, 그 중 하나를 방지하는 방법은 무엇입니까?

Question

내가 원하는 것은 스크롤 축이 지정된 영역으로 스크롤되면 작은 일련 번호가 지정된 색상으로 변경되고 동시에 해당 작은 일련 번호에 해당하는 영역으로 페이지가 스크롤되는 것입니다. 일련번호를 동시에 클릭하면 지정된 영역으로 스크롤할 수도 있습니다. 동시에 작은 일련번호가 지정된 색상으로 변경되며 스크롤만 하면 문제가 발생합니다. 해당 일련번호를 클릭하여 지정된 영역으로 점프하면 클릭 이벤트와 스크롤 이벤트가 동시에 발생합니다. 클릭이 지정된 위치로 점프하려면 이때의 색상도 스크롤 이벤트가 발생하기 때문입니다. 작은 일련번호는 여러 번 렌더링됩니다
html:
<p class="submenu" id="submenu">

으아아아

</p>

js:
var Circle=$(".cirle")
$(window).on('scroll',function(){

으아아아

$.each(circle,function(){
if(st>=$($(this).attr("scrollto")).offset().top){

으아아아

}

})

});

으아아아

제가 묻고 싶은 질문은: 페이지가 일련번호 1에 머물고 일련번호 2를 클릭하면 일련번호 2의 배경색이 변경되기 전에 일련번호 1의 배경색이 변경된다는 것입니다. 시각 효과는 특히 그렇습니다. 즉, 먼저 이전 시퀀스 번호를 렌더링한 다음 지정된 시퀀스 번호로 점프합니다. 이 현상의 원인은 if(st>=$($(this).attr("scrollto)입니다. ")).offset ().top) 이 조건은 일련번호 2를 클릭하면 일련번호 1의 조건이 반드시 만족되기 때문입니다. 3을 클릭하면 페이지의 스크롤탑은 반드시 1과 2를 만족하게 됩니다. .아 이런 현상이 발생하지 않게 하려면 어떻게 해야 할까요?

Answer 1

스크롤 이벤트가 발생할 때 트리거되는 함수를 캡슐화합니다. 이 함수를 처음에 바인딩하고, 클릭하면 바인딩을 해제하고, 클릭 이동이 완료된 후 콜백 함수에서 이 함수를 스크롤 이벤트에 다시 바인딩합니다.

으아악

Answer 2

질문을 자세히 읽지 않아서 아이디어를 제공하는 것이 가능한지 모르겠습니다. 이벤트에 flag参数判断。比如当检测到当前click事件正在执行，那么clickLock=true，此时在scroll事件中增加一个检测，如果clickLock==true的时候就return不执行scroll函数的逻辑。这样就能在执行click事件同时不执行scroll事件。scroll를 추가하면 정상적으로 단독으로 실행할 수도 있습니다. 이벤트를 반복적으로 바인딩하고 바인딩을 해제하는 아이디어는 문제를 해결할 수 있지만 성능 측면에서는 그다지 좋지 않습니다.