TA的每日心情 | 慵懒
2018-8-25 12:29 |
|---|
签到天数: 91 天 [LV.6]常住居民II
|
本帖最后由 garypang 于 2018-5-20 19:10 编辑 / {1 O+ Q% G; j" x
! l* }2 u# [7 A X2 G" l
以下只针对PC下的ANKI
& X" C. L3 l6 S/ T5 G% y+ g* X" I, Y) Z' {5 D" t
不知大家有发现没,ANKI中的一些JS效果会不断累加,浏览到第几张卡片JS就会在当前卡片上执行多少次,导致除第一张卡片外的其他所有卡片上的JS都不能正常显示, 有个插件能解决这个问题https://ankiweb.net/shared/info/1280253613
0 r2 u6 Z/ a4 U7 [但只针对anki2的, anki2.1还是没办法,
- D; ]6 a, ~$ Y9 w不用插件行不行呢,
8 U# U- F/ z$ z4 `- O首先得弄清楚为啥会出现这个问题,
* h$ ~& H. T2 y: c; S, y+ bANKI对所有 document , html ,body 元素对象里相关的JS代码都会累加重复执行,比如: y; M$ X$ I* j/ u. G* o
- document.body.click(...)
/ t. q( o1 P0 P/ B - $(window).keyup(...)! J) [1 f, B" e
- $(window).scroll(...)0 a( h( X3 Q. I* h
- $("html,body").animate(...)# @- Z2 o ~0 k' U) d
- ...
: u5 s2 ?- G% I+ D* y
+ d! z7 l \, v4 g& i举个栗子
. \/ ^+ t0 q, ^! y- $("body").click(function(){+ P! n$ ^. X0 k
- alert("test");
7 _0 E5 r& Z4 p - })
7 g( p" _' g s浏览第一张卡片的时候,鼠标点击body会弹出一次test弹窗,浏览到第二张卡片,点击一次body则会连续弹出两次test弹窗,到第三张卡片,点击一次则会连续弹出三次test弹窗,以此类推,点击事件会不断叠加, 问题不出在click事件本身,而是因为是body对象下的click,如果改为其他比如$(".anki").click(...);则完全不会出现上述问题
3 D) U. D, J# @ h) I2 K v1 c: M* F+ ~* {) o& [0 j
解决办法其实很简单,把document , html ,body 元素对象里的相关代码做个限制,只允许执行一次即可.' p& R v4 A; X! V+ @/ x4 `$ @# d
) G8 E; ^% @% v7 p! h
比如上述代码可以这样写:" M) M* @1 g K3 u- p
$ J H1 g) P; e* n4 ~0 ^* ]; S+ b9 v' _
另外一个问题,ANKI怎么引入外部JS文件? 直接<script src="..."></script>是无效的,会被anki过滤掉.
% N7 K9 g, G' X8 o
6 R4 p2 E2 N/ |* G$ c8 ~( J5 E可以这样写
0 k5 [4 {5 U T" V# C3 H( o- var script = document.createElement('script');
, L* ~3 _2 M; G$ _' q, U - script.type = "text/javascript";
F0 s, e9 U- l9 R - script.src = "_jquery.js";
+ _& H8 @: H' M5 `' v" E- @8 r$ B - document.getElementById("ak_wrap").appendChild(script);
这里特别注意,一不小心就会踩了上面那个坑,代码第四行你肯定会想当然用document.body.appendChild(script)吧,前面刚说了document.body对象里的JS会被重复执行,这样写后果就是到第二张卡片的时候就会出现两个<script src="_jquery.js"></script>, _jquery.js被调用了两次,正确的写法是append到除body, html外的其他元素里., B0 P6 ~. u" k' J& e1 ?5 t, u& \: a
& p& i" Z. ]+ S; y以上, 希望对你有帮助 |
评分
-
2
查看全部评分
-
|
发表于 2018-5-20 16:46:00
发表于 2020-2-7 20:51:12
