900字范文,内容丰富有趣,生活中的好帮手!
900字范文 > 原生js实现如下效果: 一个按钮 点击它会弹出对话框 但5秒内再点击不会再弹出对话

原生js实现如下效果: 一个按钮 点击它会弹出对话框 但5秒内再点击不会再弹出对话

时间:2018-10-01 18:32:42

相关推荐

原生js实现如下效果: 一个按钮 点击它会弹出对话框 但5秒内再点击不会再弹出对话

原生js实现如下效果: 一个按钮,点击它会弹出对话框,但5秒内再点击不会再弹出对话框。5秒后恢复正常。

第一种方式:

使用函数节流的方式(就是设置一个变量,来一个判断语句,判断这个变量的值。为真或假执行某些事情)

弹出框,我就用alert()了。

补充一下:
因为要用原生js实现,原生js提供的弹出框的方式(我暂时知道四种),其中有三种都是阻塞加载的。剩下一种很多浏览器已经不支持
alert() pormpt() confirm() 都阻塞加载
showModalDialog() 很多浏览器都不支持

直接撸代码(函数节流 我在这里直接叫 上锁 和开锁)

html代码:

<button>我是一个按钮</button>

javascript代码

// 设置锁var lock = false;var btn = document.getElementsByTagName('button')[0];btn.onclick = function() {if (lock) {return;}// 上锁lock = true;alert('我是一个对话框');setTimeout(function() {// 开锁lock = false;}, 5000);}

我这里有一个弊端,alert是阻塞加载的。所以必须是alert的对话框弹出后,关闭对话框后,再过5秒才会执行。不过题目要求也是完成了的。

原生js实现如下效果: 一个按钮 点击它会弹出对话框 但5秒内再点击不会再弹出对话框。5秒后恢复正常。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。