开发日记(2015.9.21):Js中clearInterval、window.onload失效 及 Js添加animation的浏览器兼容

原创 2015年09月21日 14:04:48

一、在使用定时器的情况下,偶尔会出现clearInterval清除不了定时器的情况
这个时候,可以通过外加一个布尔值来进行判别操作:
1)失效情况:

var timer;
function doThis(){
    //需要循环执行的 方法主体
}
function func(){
    timer = window.setInterval(doThis,200);//每隔0.2秒执行一次
}
window.clearInterval(timer);//这里可能无法清除定时器

2)解决办法:

var timer;
var doOver = true;
function doThis(){
    //这里是需要循环执行的 方法主体
    //注意:执行完后,将doOver值变为false,供给调用计时器的函数判断
    doOver = false;
}
function func(){
    if(doOver){
        timer = window.setInterval(doThis,200);//每隔200毫秒执行一次doThis()
    }else{
        window.clearInterval(timer);//清除计时器
    }
}

二、js给DOM对象设置animation属性时,需要注意兼容浏览器:
1)一般写法:

    Obj.style.animation="动画名 0.3s linear";

2)兼容写法:

    Obj.style.animation="动画名 0.3s linear";
    Obj.style.webkitAnimation="动画名 0.3s linear";//这里就对chrome和Safari兼容

三、在页面加载时调用 某个js函数,通过window.onload来实现时,失效
在ios 或 安卓 微信的自带浏览器中,window.onload完全失效,解决办法是:
不用window.onload,而是采用jQuery的ready()方法,具体如下:
1)通常写法:

    <script>
    window.onload=function(){
        //这里是需要调用的函数
    }
    </script>

2)兼容微信写法:

    <script>
        $(document).ready(function(){
            //这里是要调用的函数
        })
    </script>   

相关文章推荐

css animation 兼容360浏览器

360浏览器号称使用IE+webkit双内核,实际上使用的是本地的IE文件内核和chrome的webkit内核(最近google推出了新的内核blink,于是官网上的宣传改成了IE+Blink,呵呵)...

关于window.onload加载的多种解决方案

转自:http://blog.moocss.com/tutorials/javascript-tutorials/526.html  (Blog也不错,可以看看) By Rainbow on...

CSS3 在使用Modernizr的情况下导致animation失效

如果你在CSS中设置了animation,比如.yourDiv{animation: rot 5s linear infinite;}为了浏览器兼容,加载modernizr,这会帮你自动转换。但是注意...
  • iefreer
  • iefreer
  • 2015年02月01日 15:16
  • 3687

利用js动态控制animation动画

一般我们写css3 animation动画的时候都是把它们定死在某个值不能改变,其实在js中是有相应的对象可以达到动态控制keyframes关键帧的目的举个例子: 这个表盘效果,客户需要指针每个...
  • cztflove
  • cztflove
  • 2015年09月11日 17:39
  • 10944

有关css和js针对不同浏览器兼容的问题

首先谈一下浏览器,虽然现在ie依然是浏览器市场的老大,大约占有67%的份额,但是由于其各方面的欠缺,用户开始选择其他浏览器作为自己浏览网页的主要 工具,比如firefox、theworld、maxth...

关于JS的--window.onload()方法

一、window.onload()方法: 该方法用于在网页加载完毕后立刻执行的操作,即当html加载完毕后,立刻执行某个方法等。 二、为什么使用window.onload()? 因为JS中的函数方...

js中在window.onload中调用function函数遇到的疑惑

今天在jsp中的form表单利用onclick=”xxx”来监听js中一个function xxx(){}函数,遇到一个很奇怪的问题就是点击submit按钮之后竟然没有响应xxx()函数。在这之前我已...
  • c_p_h
  • c_p_h
  • 2017年03月19日 14:33
  • 3589

js中的window.onload和jquery中的load区别的讲解

JavaScript 中的以下代码  [javascript] view plaincopyprint? Window.onload = function (){   ...

js window.onload 加载多个函数和追加函数

平时做项目 经常需要使用window.onload, 用法如下: function func(){alert("this is window onload event!");return;...

JS 设置css样式和window.onload

javascript01.html
  • yoyov
  • yoyov
  • 2017年07月02日 10:40
  • 79
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:开发日记(2015.9.21):Js中clearInterval、window.onload失效 及 Js添加animation的浏览器兼容
举报原因:
原因补充:

(最多只允许输入30个字)