`
王斌_code
  • 浏览: 33352 次
  • 性别: Icon_minigender_1
  • 来自: 长春
社区版块
存档分类
最新评论

使用setInterval导致事件的多重绑定问题

阅读更多
使用定时器常常会出现一些时间紊乱的问题,之前我就遇到过使用setInterval产生动画,当一中断事件不断的被触发,这个就很可能会导致时间紊乱、动画紊乱的问题,想必大家在也都经历过这样的问题,解决这个问题的方法是,构造在某时刻只存在一条时间线的机制,延迟事件触发,这个将在以后的文章中讨论,今天发现了一个问题,使用setInterval会导致同一绑定的多重触发,代码如下
 
<script language='javascript' src='jquery.js'></script>
<script language='javascript'>
$(document).ready(function(){
    function tt(){
        //...一些动画代码
        $(window).keydown(function(event){
          if(event.keyCode == 37) alert("yes");
        });
    }
    setInterval(tt,1000);
});
</script>

如果等1秒,按Left键,会出现1个alert,停留5秒,再按一次Left键,会出现5个alert,也就是,每一秒注册一个监听器似的,解决方法很简单,将keydown绑定事件不参与setInterval就行了,直接和setInterval平级,即:
$(document).ready(function(){
    function tt(){
        //...一些动画代码

    }
    $(window).keydown(function(event){
       if(event.keyCode == 37) alert("yes");
    });
    setInterval(tt,1000);
});
0
0
分享到:
评论

相关推荐

    setInterval 引起的性能问题

    然而,如果不正确地使用,`setInterval`可能导致各种性能问题。这篇博客文章“setInterval引起的性能问题”探讨了这些问题以及如何避免它们。 首先,`setInterval`的定时并不精确。它并不是在指定间隔的精确时间点...

    关于JS定时器(setTimeout setInterval)定时不准问题1

    关于JS定时器(setTimeout setInterval)定时不准问题1 在JavaScript中,setTimeout和setInterval是两个基本的定时器函数,用于实现延迟执行或循环执行某个函数。然而,这两个函数在执行时往往和我们设置的延迟时间...

    使用setInterval()模拟进度条

    使用setInterval()模拟进度条 使用setInterval()模拟进度条

    setInterval

    3. **回调地狱**:如果多个`setInterval`一起使用,可能会导致回调函数堆叠,形成回调地狱,不利于代码维护。 4. **时间间隔不准确**:由于JavaScript的异步性质,`setInterval`不能保证精确的时间间隔。尤其是在...

    关于setInterval定时器的使用示例

    5. **防抖与节流**:对于事件触发频繁但并不需要每次都执行的情况(如窗口滚动),可以使用防抖(debounce)或节流(throttle)技术减少函数执行次数,提高性能。 ### 示例:`setInterval`与HTML页面结合 在名为`...

    在vue中使用setInterval的方法示例

    本文主要介绍了在Vue项目中使用JavaScript的setInterval函数的方法,以及如何处理Vue中视图更新不触发的问题。通过一个实际案例,详细说明了如何在Vue中通过setInterval定时器动态更新数据,并成功地将随机数反映在...

    Javascript中, setTimeout() 和 setInterval() 的方法

    这样的写法能够确保每次调用之间有足够的间隔,避免了`setInterval()`可能导致的问题。 总之,`setTimeout()`和`setInterval()`是JavaScript中用于处理时间调度的核心工具,它们的正确使用对于编写健壮的前端应用至...

    vue 解决setTimeOut和setInterval函数无效报错的问题

    在Vue.js开发过程中,有时会遇到`setTimeout`和`setInterval`...通过使用箭头函数来保持`this`的正确指向,以及按照UI库的推荐方式进行数据绑定和事件处理,可以有效地解决这些问题,提升Vue项目的开发效率和代码质量。

    setInterval阻塞解决方案完整代码

    前端开发中,我们会会经常使用定时器setinterval setTimeout等,但当我们离开页面时,定时器会被阻塞,导致我们再回到页面的时候定时任务会混乱运行,为些我的解决方案写了个简单demo,希望对你有所帮助

    setInterval使用 每隔一定时间执行操作

    本篇文章将深入探讨`setInterval`的使用方法、工作原理以及需要注意的细节。 `setInterval` 的基本语法如下: ```javascript setInterval(function, delay); ``` 其中,`function` 参数是需要定期执行的函数,而 ...

    JavaScript中停止执行setInterval和setTimeout事件的方法

    js 代码中执行循环事件时,经常会用到 setInterval 和 setTimeout 这两个方法,关于这两个方法的细节这里不详细讨论了,简要分享下在需要停止循环事件的时候该如何操作。 (1)setInterval 方法可按照指定的周期(以...

    javascript之setTimeOut和setInterval的用法

    使用SetInterval和设定延时函数setTimeout 很类似。setTimeout 运用在延迟一段时间,再进行某项操作。

    Javascript定时器(二)——setTimeout与setInterval

    JavaScript定时器是编程中不...总之,理解并正确使用`setTimeout`和`setInterval`是JavaScript开发中的基础技能。它们可以帮助我们实现延迟执行、定时执行和周期性执行等功能,但同时也需要谨慎处理以防止潜在的问题。

    Js动画效果-setInterval(function,time)的主要应用

    虽然`setInterval()`很强大,但过度使用或者不恰当的设置时间间隔可能导致性能问题。因为JavaScript是单线程的,如果定时器过于频繁,可能会阻塞主线程,影响用户体验。因此,通常建议将时间间隔设置得足够大,或者...

    详解javascript事件绑定使用方法

    这种情况在涉及时间敏感的事件处理时尤其要注意,例如,如果使用setInterval函数来控制动画或循环,不同浏览器中的执行顺序差异可能会导致逻辑上的混乱。 在实际开发中,页面可能会引入多个JavaScript文件,每个...

    setInterval计时器不准的问题解决方法

    这是因为JavaScript引擎是非阻塞的,当`setInterval`设定的回调函数被调用时,它并不会立即执行,而是在浏览器处理完当前任务并进入下一次事件循环时执行。如果回调函数执行时间较长,或者有其他耗时任务在运行,`...

    window.clearInterval与window.setInterval的用法.

    - 使用`setInterval`时,如果频繁调用可能会导致浏览器卡顿。 - 在不需要继续执行定时任务时,应当及时调用`clearInterval`清除定时器,避免内存泄漏。 - 在多浏览器兼容性方面,虽然`setInterval`和`clearInterval`...

    浅谈js的setInterval事件

    然而,正确使用`setInterval()`需要注意代码执行的实时性和可能的延迟问题,同时搭配`clearInterval()`来控制任务的开始和结束。在实际开发中,理解这些细节对于优化用户界面和提高应用性能至关重要。

Global site tag (gtag.js) - Google Analytics