TA的每日心情 | 慵懒
2018-8-25 12:29 |
|---|
签到天数: 91 天 [LV.6]常住居民II
|
本帖最后由 garypang 于 2018-5-20 19:10 编辑
& A; z3 z, |! O }* c- X# {& v# q3 H( i) w3 j' `
以下只针对PC下的ANKI: i9 \/ f0 G5 U: w& P
# C# p% q0 i) L) ]
不知大家有发现没,ANKI中的一些JS效果会不断累加,浏览到第几张卡片JS就会在当前卡片上执行多少次,导致除第一张卡片外的其他所有卡片上的JS都不能正常显示, 有个插件能解决这个问题https://ankiweb.net/shared/info/1280253613& P' V) A/ w, L7 u4 _3 ^- w
但只针对anki2的, anki2.1还是没办法,0 y% F1 B9 i" k9 ~. k
不用插件行不行呢,
. F- m& W7 l* ^( I0 \/ P首先得弄清楚为啥会出现这个问题," t$ K' Q1 j; \7 S6 P7 _
ANKI对所有 document , html ,body 元素对象里相关的JS代码都会累加重复执行,比如: k4 w3 j1 U* @- q. T; F+ z
- document.body.click(...)
X9 V7 e5 t8 O L$ D - $(window).keyup(...)
3 y E/ N7 m0 a. \ - $(window).scroll(...)' W) g9 s, r5 |3 t
- $("html,body").animate(...)
: @* c, t3 C7 H5 Y! P" s - ...
1 l8 G9 v6 c$ R% A! x& Z9 F9 v
* x& q4 ^& {, }# W- o) W举个栗子/ K6 B( h8 @; E8 o8 S [8 C* y
- $("body").click(function(){+ m! X& b) u) V9 Z1 n# }: L( v
- alert("test");
" ]! I3 a2 ^. \+ X( B. B - })
( L9 S" g' c, ^& {1 {" O; Y0 V浏览第一张卡片的时候,鼠标点击body会弹出一次test弹窗,浏览到第二张卡片,点击一次body则会连续弹出两次test弹窗,到第三张卡片,点击一次则会连续弹出三次test弹窗,以此类推,点击事件会不断叠加, 问题不出在click事件本身,而是因为是body对象下的click,如果改为其他比如$(".anki").click(...);则完全不会出现上述问题
3 N0 f0 m1 I d' P$ p. a- y5 h& V6 H- j f4 |* K, @
解决办法其实很简单,把document , html ,body 元素对象里的相关代码做个限制,只允许执行一次即可.: g! ~2 V. P' g, E6 W" l2 `. M( w
- t& u, d+ x, \6 s比如上述代码可以这样写:& m( ^6 w2 t( T/ C% g% {7 k8 x
, X$ x9 R4 t* V d" D9 W, G
9 T j6 |' @6 `5 f另外一个问题,ANKI怎么引入外部JS文件? 直接<script src="..."></script>是无效的,会被anki过滤掉.- i8 ~6 j {3 g/ H6 |) {
* ?1 H; P0 K; T0 X2 }; c, _0 H" r2 I3 E
可以这样写" I F+ \; B9 C) n# y
- var script = document.createElement('script');# C: v, T0 G3 N$ b/ v6 w$ D
- script.type = "text/javascript";( k [2 z) Y& \( k) D- U
- script.src = "_jquery.js";
6 |* \2 l R! l9 J2 e - document.getElementById("ak_wrap").appendChild(script);
这里特别注意,一不小心就会踩了上面那个坑,代码第四行你肯定会想当然用document.body.appendChild(script)吧,前面刚说了document.body对象里的JS会被重复执行,这样写后果就是到第二张卡片的时候就会出现两个<script src="_jquery.js"></script>, _jquery.js被调用了两次,正确的写法是append到除body, html外的其他元素里.0 Q9 g$ l- ~. F' y' B6 k
" A& d7 R# E/ O! M! b! D' O' e8 N. V8 ]
以上, 希望对你有帮助
|
评分
-
2
查看全部评分
-
|
发表于 2018-5-20 16:46:00
发表于 2018-5-21 10:39:00
