TA的每日心情 | 慵懒
2018-8-25 12:29 |
|---|
签到天数: 91 天 [LV.6]常住居民II
|
本帖最后由 garypang 于 2018-5-20 19:10 编辑 4 S8 L/ ]7 o/ i- Y. ]
8 ?5 D/ q l4 k( u! z
以下只针对PC下的ANKI
6 X& A- a/ w9 \2 S, `, g) D" Q6 S: n. C( q+ l& ~
不知大家有发现没,ANKI中的一些JS效果会不断累加,浏览到第几张卡片JS就会在当前卡片上执行多少次,导致除第一张卡片外的其他所有卡片上的JS都不能正常显示, 有个插件能解决这个问题https://ankiweb.net/shared/info/1280253613
% N: Z! _6 D+ c/ z但只针对anki2的, anki2.1还是没办法,
; S1 R! a$ \- L不用插件行不行呢,& J: n$ C6 O9 X
首先得弄清楚为啥会出现这个问题,
7 ^6 h' T, Y$ G# o7 L: W/ Y- HANKI对所有 document , html ,body 元素对象里相关的JS代码都会累加重复执行,比如
9 g2 J z( D8 ^- S8 R- document.body.click(...)6 K, p) C% J, m' `2 @# _1 p8 F+ Y
- $(window).keyup(...)# j% ]3 K: K- |$ q
- $(window).scroll(...)
: m* ]% L; j- m% Y/ U0 B! s7 x# a - $("html,body").animate(...)( f9 `7 D0 V9 L+ S- p% t8 H
- ...
6 | w* ]% `, c" ]! I6 y! O
1 L9 {# ]+ S- v! p4 R- L举个栗子
: m* D* C. B; t* ]- $("body").click(function(){, W0 G1 y+ K9 r) h6 K8 g' S: D
- alert("test");4 H$ m) b. n7 g$ f3 N
- })
浏览第一张卡片的时候,鼠标点击body会弹出一次test弹窗,浏览到第二张卡片,点击一次body则会连续弹出两次test弹窗,到第三张卡片,点击一次则会连续弹出三次test弹窗,以此类推,点击事件会不断叠加, 问题不出在click事件本身,而是因为是body对象下的click,如果改为其他比如$(".anki").click(...);则完全不会出现上述问题
0 S! t9 ?% h6 Y Z, z* B, Q: r; ^4 s
6 s8 D6 ]- Z s4 r5 u解决办法其实很简单,把document , html ,body 元素对象里的相关代码做个限制,只允许执行一次即可.. \( H) b2 R9 [
: O' k- u0 x8 r+ s# H% C' ^+ F
比如上述代码可以这样写:3 }' U1 N2 |: j! L
* _- m ?% W5 e8 j" c! X
2 l% d) t# t2 l/ i另外一个问题,ANKI怎么引入外部JS文件? 直接<script src="..."></script>是无效的,会被anki过滤掉.
+ p6 Z. ~% y# z( Q
. \2 h8 j! [8 d2 E1 N可以这样写# Z3 u0 F% M, Y' p! f
- var script = document.createElement('script');
% c- C. Y \2 Z$ _0 H/ X' i - script.type = "text/javascript";
% N5 r# g9 u9 k6 `. X! q! q - script.src = "_jquery.js";
0 E5 N- F" I& k& b) W - document.getElementById("ak_wrap").appendChild(script);
/ R6 p$ Q* V) q$ u J* v0 v这里特别注意,一不小心就会踩了上面那个坑,代码第四行你肯定会想当然用document.body.appendChild(script)吧,前面刚说了document.body对象里的JS会被重复执行,这样写后果就是到第二张卡片的时候就会出现两个<script src="_jquery.js"></script>, _jquery.js被调用了两次,正确的写法是append到除body, html外的其他元素里.9 `& V, W5 \4 S: a
* v3 u0 }2 l% H0 W/ _6 M3 P以上, 希望对你有帮助 |
评分
-
2
查看全部评分
-
|
发表于 2018-5-20 16:46:00
发表于 2020-2-7 20:51:12
