- A+
上个迭代别人的代码，然后这个迭代我领了相关任务，然后被迫来填坑:
c#
-
问题1：
点击事件触发正常，但是看Console中打印出错误日志：Uncaught SyntaxError: Unexpected token )
解决：
javascript:void(0)写成了javascript:void()，少了参数0
-
问题2：
按钮点击事件重复
解决：
增加节流函数，如下代码
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<span class="hljs-comment">/** * 防止重复点击的函数 * handler 真实需要执行的函数 * wait 多久内不能重复点击（毫秒ms） */</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">throttle</span>(<span class="hljs-params">handler, wait</span>) </span>{ <span class="hljs-keyword">if</span> (!handler.timeoutId) { handler.timeoutId = <span class="hljs-built_in">window</span>.setTimeout(<span class="hljs-function"><span class="hljs-keyword">function</span> () </span>{ handler.timeoutId = <span class="hljs-literal">null</span>; }, wait); handler(); <span class="hljs-comment">// 实际点击时间方法</span> } } |
需要使用的地方，设置点击事件 onclick="return throttle(submitClick,500);" 即可，submitClick即为你的实际点击事件，500即500ms触发一次：
当然，这个节流方法也可以这样写：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<span class="hljs-comment">/** * 防止重复点击的函数 * handler 真实需要执行的函数 * wait 多久内不能重复点击（毫秒ms） */</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">throttle</span>(<span class="hljs-params">handler, wait</span>) </span>{ <span class="hljs-keyword">if</span> (handler.timeoutId) { <span class="hljs-built_in">window</span>.clearTimeout(handler.timeoutId) } handler.timeoutId = <span class="hljs-built_in">window</span>.setTimeout(<span class="hljs-function"><span class="hljs-keyword">function</span> () </span>{ handler(); handler.timeoutId = <span class="hljs-literal">null</span>; }, wait); } |
两者的区别是：第一种是先执行handler函数，然后倒计时wait毫秒后才能继续执行；第二种是点击事件触发后，倒计时wait毫秒后才执行handler函数，如果这段时间内有第二次点击事件进入，则移除上一次点击事件，重新开始倒计时，直到wait毫秒内没有点击事件才会最终触发。
这两种没什么孰优孰劣，视具体情况使用即可。
ps：之所以写这个是因为同事之前写的代码存在问题，防止重复点击如下面这样写：
|
1 2 3 4 5 6 7 8 |
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">submitClick</span>() </span>{ <span class="hljs-keyword">if</span> (!flag) { flag= <span class="hljs-literal">true</span> ...实际点击事件触发的代码 flag= <span class="hljs-literal">false</span> } } |
这实际上就一个防止并发的代码吧...如何能起到防止重复点击的作用呢？而且html中js也是单线程事件循环，这个有点多余了。
简书：ThinkinLiu 博客: IT老五
IT老五（it-lao5）：关注公众号，一起源创，一起学习！
我的微信公众号
我的微信公众号扫一扫
