TA的每日心情 | 慵懒
2018-8-25 12:29 |
|---|
签到天数: 91 天 [LV.6]常住居民II
|
本帖最后由 garypang 于 2018-5-20 19:10 编辑
% ?' o. z0 [. ~4 m8 z
o, `7 B* c' g7 {3 R# g. k, q以下只针对PC下的ANKI
5 s! c. v9 W! m N
. C& U" n- U0 l P( e不知大家有发现没,ANKI中的一些JS效果会不断累加,浏览到第几张卡片JS就会在当前卡片上执行多少次,导致除第一张卡片外的其他所有卡片上的JS都不能正常显示, 有个插件能解决这个问题https://ankiweb.net/shared/info/12802536136 z5 h3 T0 I- n
但只针对anki2的, anki2.1还是没办法,6 O/ m, o+ r9 G4 }& i
不用插件行不行呢,
- p; d6 C# }* v首先得弄清楚为啥会出现这个问题, t+ m! N7 }6 A
ANKI对所有 document , html ,body 元素对象里相关的JS代码都会累加重复执行,比如: ?" n; p/ B N( g* M
- document.body.click(...)2 g0 N" `$ C+ B1 t
- $(window).keyup(...)
! n( r6 e- A8 W) @ - $(window).scroll(...)5 O; z" |2 U% u& d5 w# K1 u. C7 R
- $("html,body").animate(...)# Q3 u! M8 S% M- l& T2 k
- ...
' [) d0 |1 B( b5 k" r
举个栗子
8 A/ } d+ u2 k5 P- $("body").click(function(){
0 I. d& l: ~. c# R- O# h - alert("test");, g+ h y4 [ Q- u6 w4 B
- })
浏览第一张卡片的时候,鼠标点击body会弹出一次test弹窗,浏览到第二张卡片,点击一次body则会连续弹出两次test弹窗,到第三张卡片,点击一次则会连续弹出三次test弹窗,以此类推,点击事件会不断叠加, 问题不出在click事件本身,而是因为是body对象下的click,如果改为其他比如$(".anki").click(...);则完全不会出现上述问题
# S# B4 e5 h+ m ?4 E8 z4 g/ p9 V4 L8 K" y' M0 U3 N& m
解决办法其实很简单,把document , html ,body 元素对象里的相关代码做个限制,只允许执行一次即可.
) D/ Z! f0 m' g3 s( C7 O
( l5 h/ z) w) [$ x0 q$ B比如上述代码可以这样写:
. p- I, W& A+ b- a* W! p! g+ t- i4 z- P. b) { z
; \1 ]; n) h% y' V$ Z
另外一个问题,ANKI怎么引入外部JS文件? 直接<script src="..."></script>是无效的,会被anki过滤掉.
9 j2 H5 ~9 d0 h h# I! }1 M. e; |1 l% _& d
可以这样写4 Z5 [3 E3 d0 ^/ l8 Y' n) v2 d
- var script = document.createElement('script');0 `8 f/ k d8 K7 X* A. l- Z7 A
- script.type = "text/javascript";$ @, K. Q" ` i& r+ _% \8 w/ {
- script.src = "_jquery.js";
) h n- _/ r7 Z0 a V) x$ ` - document.getElementById("ak_wrap").appendChild(script);
这里特别注意,一不小心就会踩了上面那个坑,代码第四行你肯定会想当然用document.body.appendChild(script)吧,前面刚说了document.body对象里的JS会被重复执行,这样写后果就是到第二张卡片的时候就会出现两个<script src="_jquery.js"></script>, _jquery.js被调用了两次,正确的写法是append到除body, html外的其他元素里.* z) G! z% s" S6 K
* S: F/ f2 S! K: g以上, 希望对你有帮助 |
评分
-
2
查看全部评分
-
|
发表于 2018-5-20 16:46:00
发表于 2020-2-7 20:51:12
