解决定时器报错:Uncaught TypeError: that.setAttribute is not a function
程序员文章站
2022-03-13 19:25:35
...
报错原因：
定时器里面的this指向的window，而window则没有下面用到的函数
解决办法:
在定时器外把需要用的this提前赋值给一个变量
定时器内使用该变量代替this
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<svg id="s3" width="800" height="600" style="background-color: yellow">
</svg>
<script>
function rn(max,min) {
var num=Math.random()*(max-min)+min;
return Math.floor(num)
}
function cn(max,min) {
var r=rn(max,min)
var g=rn(max,min)
var b=rn(max,min)
return `rgb(${r},${g},${b})`
}
console.log(rn(0,256))
//创建一个循环30次
var s3=document.getElementById("s3")
for(var i=0;i<30;i++) {
//创建圆
var c = document.createElementNS(
"http://www.w3.org/2000/svg",
"circle"
);
c.setAttribute("r", rn(10, 80))
c.setAttribute("cx", rn(0, 800))
c.setAttribute("cy", rn(0, 600))
c.setAttribute("fill", cn(0, 256))
c.setAttribute("fill-opacity", rn(0, 10) * (0.1))
s3.appendChild(c)
c.onclick=function () {
//此处this指向的c
var that=this
//为了防止圆被再次点击，消息监听函数
that.onclick=null
console.log(this)
var x=this.getAttribute("r")
var y=this.getAttribute("fill-opacity")
var t= setInterval(function(){
//定时器里的this为window
x++
y*=0.9
that.setAttribute("r",x)
that.setAttribute("fill-opacity",y)
if(y<0.001){
clearInterval(t)
s3.removeChild(that)
}
},100)
}
}
</script>
</body>
</html>
下一篇： MySQL Bug导致异常宕机的分析流程
推荐阅读
-
Vue 报错TypeError: this.$set is not a function 的解决方法
-
Vue报错：Uncaught TypeError: Cannot assign to read only property’exports‘ of object’#
-
解决Ajax方式上传文件报错"Uncaught TypeError: Illegal invocation"
-
Vue报错：Uncaught TypeError: Cannot assign to read only property’exports‘ of object’#
-
报错：Uncaught TypeError: $(…).dialog is not a function，处理方法。
-
Vue 报错TypeError: this.$set is not a function 的解决方法
-
Vue报错：Uncaught TypeError: Cannot assign to read only property’exports‘ of object’#
-
解决Ajax方式上传文件报错"Uncaught TypeError: Illegal invocation"
-
解决定时器报错:Uncaught TypeError: that.setAttribute is not a function
-
Vue报错：Uncaught TypeError: Cannot assign to read only property’exports‘ of object’#