TA的每日心情 | 慵懒
2018-8-25 12:29 |
|---|
签到天数: 91 天 [LV.6]常住居民II
|
本帖最后由 garypang 于 2018-5-20 19:10 编辑
' E+ p' |9 a4 Q c* p1 b
) [. `" n7 [5 r以下只针对PC下的ANKI
' o! g" @: n2 h! V% Z6 m& R* @3 X0 j) P5 c; `) k% @+ }
不知大家有发现没,ANKI中的一些JS效果会不断累加,浏览到第几张卡片JS就会在当前卡片上执行多少次,导致除第一张卡片外的其他所有卡片上的JS都不能正常显示, 有个插件能解决这个问题https://ankiweb.net/shared/info/12802536131 K0 c9 m0 ~* L
但只针对anki2的, anki2.1还是没办法,
5 V+ r9 p. ]; ]5 Q. N$ h不用插件行不行呢,3 X: }% Z9 q* e& o* Q5 M* ~# g
首先得弄清楚为啥会出现这个问题,- f" r7 T3 D) w& d" |: i7 O! _
ANKI对所有 document , html ,body 元素对象里相关的JS代码都会累加重复执行,比如
8 E: Q* R; J, q- document.body.click(...)
# x5 m. l, Z j( y1 r - $(window).keyup(...)
, C6 ^" s7 k0 M! y' z - $(window).scroll(...)
+ h" y% k# k* u - $("html,body").animate(...)8 J6 o0 h! L) m' r/ {: l
- ...
5 |+ d$ Q' p8 l7 q
" o3 p' f4 p" N! }举个栗子
- E' I! g' A5 P' E! ] P- $("body").click(function(){# J! g5 f4 ~; M0 u/ A0 h2 ^" |
- alert("test");; R' {$ i3 G7 j: @9 J6 P2 w1 W
- })
3 ]3 |2 J- T1 t3 {; f$ Z浏览第一张卡片的时候,鼠标点击body会弹出一次test弹窗,浏览到第二张卡片,点击一次body则会连续弹出两次test弹窗,到第三张卡片,点击一次则会连续弹出三次test弹窗,以此类推,点击事件会不断叠加, 问题不出在click事件本身,而是因为是body对象下的click,如果改为其他比如$(".anki").click(...);则完全不会出现上述问题( y: [3 _" f- M; _* V9 X9 Q
6 Z9 H% {' i5 j1 x3 K' o) N解决办法其实很简单,把document , html ,body 元素对象里的相关代码做个限制,只允许执行一次即可.4 s, b& g, ^# i/ T1 E! N- L
; l; y5 r. y p比如上述代码可以这样写:
& m$ U! ?+ ]0 d; g5 h3 n$ H" z6 b, N1 d/ ]% R9 M2 f8 d( ~
5 |8 R9 k* [8 d: L/ |: P
另外一个问题,ANKI怎么引入外部JS文件? 直接<script src="..."></script>是无效的,会被anki过滤掉.
5 N# {2 x" w# Z5 s8 E: _: z
& A0 N! n0 ]0 m0 M) S g可以这样写) }8 q$ n" f9 M& f
- var script = document.createElement('script');
) f: |/ A% [( V6 i; Y - script.type = "text/javascript";* a( [) s0 A. |( o6 |! B8 Y& s) I6 r
- script.src = "_jquery.js";
# c) b" W8 ^7 k2 k5 T. E# O - document.getElementById("ak_wrap").appendChild(script);
3 ]" n3 w1 o: j, }& f" t. A4 ?% L这里特别注意,一不小心就会踩了上面那个坑,代码第四行你肯定会想当然用document.body.appendChild(script)吧,前面刚说了document.body对象里的JS会被重复执行,这样写后果就是到第二张卡片的时候就会出现两个<script src="_jquery.js"></script>, _jquery.js被调用了两次,正确的写法是append到除body, html外的其他元素里." ]' N4 V5 m- V2 P% M: U; l
% u4 U/ X. n; ^" B. K8 X" j' f以上, 希望对你有帮助 |
评分
-
2
查看全部评分
-
|
发表于 2018-5-20 16:46:00
发表于 2020-2-7 20:51:12
