TA的每日心情 | 慵懒
2018-8-25 12:29 |
|---|
签到天数: 91 天 [LV.6]常住居民II
|
本帖最后由 garypang 于 2018-5-20 19:10 编辑
' a0 O* y& Q: `7 ^( a
5 X* U0 l3 s; m: c7 P以下只针对PC下的ANKI( G' ~; d: K- I& z) K3 C7 h
8 @! w0 |" |* ?. g
不知大家有发现没,ANKI中的一些JS效果会不断累加,浏览到第几张卡片JS就会在当前卡片上执行多少次,导致除第一张卡片外的其他所有卡片上的JS都不能正常显示, 有个插件能解决这个问题https://ankiweb.net/shared/info/1280253613) F4 m" a ~# @0 c4 Z, @# J) Z- ^
但只针对anki2的, anki2.1还是没办法,
. `8 h& g* r6 V3 \不用插件行不行呢,
' a" L. Q1 e( ~' ^% x9 ]+ v1 j7 k首先得弄清楚为啥会出现这个问题,
U* T4 }1 u2 {- a6 VANKI对所有 document , html ,body 元素对象里相关的JS代码都会累加重复执行,比如2 I p, _2 |. \/ d6 x* ?
- document.body.click(...)
8 W6 \- w' }9 s3 r8 m; }2 R - $(window).keyup(...)1 P: O$ W/ H4 f8 l: u
- $(window).scroll(...), K% {" ?9 H4 W, ]+ `. Z
- $("html,body").animate(...)
6 y0 C' t% \+ p) v/ v - ...% E& |' O! G' l s# V/ V+ H' W
举个栗子
0 o% a# j2 u: p+ L/ O9 e8 U- $("body").click(function(){
2 ^- {/ T: p/ s' L* }- y- w7 t - alert("test");
2 h" {# x) C& Q+ v - })
浏览第一张卡片的时候,鼠标点击body会弹出一次test弹窗,浏览到第二张卡片,点击一次body则会连续弹出两次test弹窗,到第三张卡片,点击一次则会连续弹出三次test弹窗,以此类推,点击事件会不断叠加, 问题不出在click事件本身,而是因为是body对象下的click,如果改为其他比如$(".anki").click(...);则完全不会出现上述问题! \$ K" Z# O1 E) v; d
4 @. @" _2 f8 A9 `* _( p# H解决办法其实很简单,把document , html ,body 元素对象里的相关代码做个限制,只允许执行一次即可.4 g- Y5 P B3 B8 j; |1 \' T/ T
2 V, B+ S8 {" g, p7 W- Z7 }
比如上述代码可以这样写:
8 W( x* W# x. }8 ]% V
) @- {( K# X) S) Z9 t% i1 O% e4 \) X0 I9 A; b" M+ e7 ]
另外一个问题,ANKI怎么引入外部JS文件? 直接<script src="..."></script>是无效的,会被anki过滤掉.
v, }* y9 i: C2 r! B/ n6 I& W% ~# N7 N
可以这样写
) {* b2 M% l3 E1 g- var script = document.createElement('script');
7 I- Q* u6 `7 {& `/ a - script.type = "text/javascript";
6 z( o$ C0 u3 v$ ?7 b' M4 t# t - script.src = "_jquery.js"; 5 M& Y7 d" ~# x
- document.getElementById("ak_wrap").appendChild(script);
) c- f& x7 x" S: l5 Q3 p; k这里特别注意,一不小心就会踩了上面那个坑,代码第四行你肯定会想当然用document.body.appendChild(script)吧,前面刚说了document.body对象里的JS会被重复执行,这样写后果就是到第二张卡片的时候就会出现两个<script src="_jquery.js"></script>, _jquery.js被调用了两次,正确的写法是append到除body, html外的其他元素里.6 w+ [1 T, w2 t( i2 m u
3 A a5 `3 r+ N: }
以上, 希望对你有帮助 |
评分
-
2
查看全部评分
-
|
发表于 2018-5-20 16:46:00
发表于 2020-2-7 20:51:12
