tnblog
首页
视频
资源
登录
愿你出走半生,归来仍是少年
排名
3
文章
317
粉丝
22
评论
14
bootstrap 栅格布局一小例子
剑轩 : 后端写样式有点痛苦哇
一点flex布局的运用
剑轩 : 后端写样式有点痛苦哇
vue.js常用指令
剑轩 : 可以可以,多总结一点
ICP备案 :渝ICP备18016597号-1
网站信息:2018-2025TNBLOG.NET
技术交流:群号656732739
联系我们:contact@tnblog.net
公网安备:50010702506256
欢迎加群交流技术

javascript阻止scroll事件多次执行的思路及实现

4967人阅读 2018/12/17 10:00 总访问:2060850 评论:0 收藏:0 手机
分类: JS相关



  1. //测试代码
  2. window.onscroll = function()
  3.     alert("haha"); 
  4. }

鼠标滑动之后一直点击提示框才可以,我想要的是鼠标滑动后只执行一次事件。

既然scroll事件是一个连续触发事件,那我设置一个延迟器,在用户滑动鼠标的时间后执行该函数 ,就可以只执行一次啦 。

  1. //测试代码: 
  2. function haha()
  3.     alert("haha"); 
  4. window.onscroll = function()
  5.     setTimeout(haha,500); 
  6. }


结果发现还是和上面一样弹出很多的警告框 
可见 scroll事件像队列一样排成一行 ,按顺序执行 ,所以此路不通。

那么就用条件控制事件执行方法

  1. var tur = true
  2. function haha(){
  3.     alert("haha"); 
  4.     tur = true
  5. window.onscroll = function()
  6.     if(tur){ 
  7.         setTimeout(haha,1000); 
  8.         tur = false
  9. }else{ } 
  10. }


鼠标滚动执行一次代码 ,问题是当再次滚动鼠标之后,事件再也不执行了。 
原因就是条件被设置为false 所以后续的事件永远不执行了。

思路就是条件判断+延迟执行就可以解决这个问题。在事件执行之初,复活变量,事件执行完毕后杀死变量。


那个变量恢复为true的可以在请求后台数据解析成功后,在恢复为true这样就能更好的防止数据被重复请求了






欢迎加群讨论技术,1群:677373950(满了,可以加,但通过不了),2群:656732739。有需要软件开发,或者学习软件技术的朋友可以和我联系~(Q:815170684)

评价

javascript中的事件委托

什么是事件委托事件委托在JavaScript中是非常常见的,它主要用于对某个元素中的子元素的冒泡事件进行监听。JavaScript高级...

javascript的事件分类

JavaScript的事件大致可以分为几类,了解这些事件分类将有助于理解和组织代码。1、依赖于设备的输入事件有些事件和特定输入...

javascript、TypeScript数组里的删除指定元素

删除数组中指定的元素,原理上是不能直接删除指定的元素 要是可以直接删除的话绝对又bug 但是可以灵活的应用。自定义函数删...

a href=与 a href=javascript:void(0) 的区别

#包含了一个位置信息默认的锚点是#top 也就是网页的上端而javascript:void(0) 仅仅表示一个死链接这就是为什么有的时候页...

Blazor的javascript和c相互调用

1、c#调用JavaScript privateMarkupStringmarkup=newMarkupString(); privatestringdate=DateTime.Now.ToString(); priv...

Blazor的c调用javascript传参

1、新建类库ExampleMethed和BlazorMerhed privatestringname="张三"; privatestringresult=string.Empty; pri...

embed标签 阻止点击事件 让父元素处理点击事件

标签定义嵌入的内容,比如插件。 结果用了这个标签发现点击事件被阻止了猜测肯定应该是embed浮动在最上面了 只需要在加个...

vue 防止事件冒泡阻止事件冒泡

代码如下: <div class="parent-name" @click.stop="clickname"></div>

渣渣学安卓之scrollView控件实现屏幕上下滚动

android实现屏幕上下滚动有个ScrollView控件,拖动控件自带LinearLayout, 把需要滑动的页面放在LinearLayout其下即可。&lt...

scroll-view封裝刷新加载组件

<template> <viewclass="container"> <scroll-viewscroll-with-animationclass="scrol...

vue,js实现描点效果。scrollIntoView方法

代码如下: let element = document.getElementById('labroomProcess') element.scrollIntoView()