解决 JavaScript XHR 过早 return 导致返回 null 的问题
在 XHR 中,由于异步特性,导致变量在被赋值前被 return
,此时将导致返回值为空。
枫茶舍
这里筱枫~
在 XHR 中,由于异步特性,导致变量在被赋值前被 return
,此时将导致返回值为空。
let request = new XMLHttpRequest();
request.open('GET', url);
request.onload = function() {
//request.response 可以获得返回的数据
//在这里继续要进行的操作
};
request.send();
参考链接:
在通常情况下,对于
let str = 'abcd';
有str.length = 4
。
但是,若
str = '👨👩👧👦👵🏻';
此时有str.length = 15
,仅仅 2 字符就占了 15 个常规字符位。这是由于单个 Emoji 等字符拥有两个及以上的常规字符位造成的。
此时用indexOf()
等函数无法确切定位到字符串中的字符位置。
为什么有 Emoji 字符占用多的这种问题?如果你感兴趣,可以拉到文章末尾,我先介绍解决方案。
我们这里使用开源项目orling/grapheme-splitter处理。
下载仓库内的 index.js,引入网页等。
var splitter = new GraphemeSplitter();
var graphemes = splitter.splitGraphemes(string);
这样得到的graphemes
就是目标字符串(数组)。
graphemes = ['👨👩👧👦','👵🏻']
str = ['👨👩👧👦','👵🏻'];
这是由于复杂的 Emoji 符号由基础 Emoji 符号拼凑而成。
例如,符号“👨👩👧👦”由 15 字符组成,分别是:
在这个符号里,ZWJ 符号把四个基础的表情符号联系到一起,组成新的字符。
又比如符号“👵🏻”由 4 字符组成,分别是:
所以,依靠charAt()
无法准确地逐字输出他们。
本文代码来自 知乎 / Daotin : 3分钟搞定图片懒加载
之前找到许多懒加载的源码都需要手动定义图片大小,这对于一部分页面来讲很困难。以下的代码则可以绕过这一步骤,从而更加容易添加到网站上。
首先需要将图片调整为 data-src
属性进行加载,并根据自己需要添加 class
<img data-src="./images/1.jpg">
在网页末尾,引用 jQuery 和相关代码
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
$(function () {
// 第一次需要先加载一次
lazyLoad();
$(window).scroll(lazyLoad);
function isInSight(el) {
const bound = el.getBoundingClientRect();
const clientHeight = $(window).height(); // 可视区高度
return bound.top <= clientHeight + 100; // 这里有个+100是为了提前加载。(推荐数值大于一个屏幕高度 px ,只 +100px 在实践中略显滞后。——摘者按)
}
function lazyLoad() {
$.each($('img'), (index,item)=>{ //选择器这里可以加入自己设置的 class(摘者按)
if(isInSight(item)) {
$(item).attr('src', $(item).attr('data-src'));
}
});
}
});
</script>
本文中代码援引 CSDN 用户@天际的海浪
原文地址 https://bbs.csdn.net/topics/392184885
<script type="text/javascript">
if (screen.width<640)
document.write('<script type="text/javascript" src="1.js"><\/script>');
else
document.write('<script type="text/javascript" src="2.js"><\/script>');
</script>
依据 JavaScript 的 Screen
对象之 Width
属性读取屏幕宽度。
相关阅读
- Screen 对象 | 菜鸟教程 - https://www.runoob.com/jsref/obj-screen.html
- Screen width 属性 | 菜鸟教程 - https://www.runoob.com/jsref/prop-screen-width.html