TA的每日心情 | 慵懒 2018-8-25 12:29 |
---|
签到天数: 91 天 [LV.6]常住居民II
|
本帖最后由 garypang 于 2018-5-20 19:10 编辑
# e& V! y8 j9 Z: p, m5 c% [1 i' \+ A$ c S. \: k/ R
以下只针对PC下的ANKI& \& ~* S: W* x1 |* l9 X2 F; g
# V8 u, {6 t1 s" v
不知大家有发现没,ANKI中的一些JS效果会不断累加,浏览到第几张卡片JS就会在当前卡片上执行多少次,导致除第一张卡片外的其他所有卡片上的JS都不能正常显示, 有个插件能解决这个问题https://ankiweb.net/shared/info/12802536135 E6 e U; D' c a4 g$ q0 d6 ?
但只针对anki2的, anki2.1还是没办法,8 K$ ~9 X" g$ e+ @9 L5 x* O
不用插件行不行呢,
" @2 u, U l# L6 I* [; s- W首先得弄清楚为啥会出现这个问题,( s, B# Y7 ~% E( U" P; F5 {
ANKI对所有 document , html ,body 元素对象里相关的JS代码都会累加重复执行,比如
9 T% ~, w- z5 l- document.body.click(...)0 X {. V& t" I# ?
- $(window).keyup(...)( X( F1 I. }, K2 ]6 R
- $(window).scroll(...)
( d S3 ]. L" d/ y: \" Y" Q* { - $("html,body").animate(...)
$ f& h, l; h1 C; p/ I. G a - ...
$ [7 b/ s% b+ K
复制代码 : k* t7 b( R3 \* H
举个栗子9 j3 Q% u! U( K- B, ?
- $("body").click(function(){
; P; W- D0 T: r; U& B - alert("test");
4 z1 ?4 S' _, O7 ` - })
复制代码
( t: C: p( t0 T8 S浏览第一张卡片的时候,鼠标点击body会弹出一次test弹窗,浏览到第二张卡片,点击一次body则会连续弹出两次test弹窗,到第三张卡片,点击一次则会连续弹出三次test弹窗,以此类推,点击事件会不断叠加, 问题不出在click事件本身,而是因为是body对象下的click,如果改为其他比如$(".anki").click(...);则完全不会出现上述问题
+ D1 c! C9 b9 b( f. X+ b- L
) D4 D3 k) ?- X* V0 I3 i, v' o! a2 Z6 E解决办法其实很简单,把document , html ,body 元素对象里的相关代码做个限制,只允许执行一次即可.
3 \2 T+ B1 k8 y, H; t( i& L# W5 L# O: R$ I6 W
比如上述代码可以这样写:
$ D: E* v9 Z4 W* v9 f& J7 S& [, I
# Z9 Z+ I2 D) u6 m
% \; a' _8 {2 Y* {& t; B另外一个问题,ANKI怎么引入外部JS文件? 直接<script src="..."></script>是无效的,会被anki过滤掉.' u. ]+ |8 B. B# d
" d1 o# _* y* K1 E可以这样写; M; w; q; q6 A' l& Z ^, }, b
- var script = document.createElement('script');0 I; a2 d- H# d* R' ?
- script.type = "text/javascript";
+ g9 W: J) K4 j, A* V, m2 _ - script.src = "_jquery.js";
; _6 m' a. m% s1 d - document.getElementById("ak_wrap").appendChild(script);
复制代码
+ t& [. ?' [( t/ A: h& `9 }2 c这里特别注意,一不小心就会踩了上面那个坑,代码第四行你肯定会想当然用document.body.appendChild(script)吧,前面刚说了document.body对象里的JS会被重复执行,这样写后果就是到第二张卡片的时候就会出现两个<script src="_jquery.js"></script>, _jquery.js被调用了两次,正确的写法是append到除body, html外的其他元素里.# O" F- A/ y8 b$ ]# M4 M6 j
3 Q: ?( g9 F3 x8 B: k. j# s- g以上, 希望对你有帮助 |
评分
-
2
查看全部评分
-
|