踩坑 JavaScript循环中的闭包引起的问题

关于for循环中的闭包问题,其实早在之前我学习闭包的时候,就看过不下两篇文章提到过了,算是一个很经典的问题了。

尴尬的是,当同事叫我帮忙看这个问题的时候,我虽然一眼就看出了问题产生的原因,但是却死活想不起来解决方法,没办法只好又去google了一下才解决。

所以今天额外写一篇采坑记录加深印象

问题描述

问题产生的原因就是在for循环中使用了闭包,导致了“出乎意料”的结果。

代码演示:

var funcArr = [];
for(var i=1;i<=10;++i){
    var func = function(){
        console.log("这是第 "......

阅读更多

Vue 在使用异步Ajax时mint-ui的懒加载组件InfiniteScroll存在的坑

mint-ui是饿了么提供的一套vue移动组件,使用起来还是很方便的。

其中有一类组件是用于分页加载数据的,比如Infinite Scroll和Loadmore这两个组件。

最近同事在使用Infinite Scroll实现数据分页懒加载时,遇到了一个奇怪的坑,我花了不少时间才定位出来原因,今天就写到博客里记录一下避免以后再次踩坑。

先来看看Infinite Scroll的介绍:

Infinite Scroll的主要属性为v-infinite-scroll和infinite-scroll-distance,v-infinite-scroll为触发加载时执行的函数,infinite……

阅读更多

解决Crayon Syntax Highlighter代码高亮插件多余空代码行的问题

我在wordpress里安装了一个代码高亮插件——Crayon Syntax Highlighter,这个插件有中文的配置页面,功能挺强大的,支持多种代码主题,可以自定义代码字体,边距等属性,用起来还算比较顺手的。

但是直到最近我才发现,这个插件渲染的代码块会在末尾多出一行空的代码行:

我以为我是在markdown里不小心多输入了一个回车符什么的,但是去检查了,发现也没有。去Crayon Syntax Highlighter的配置页面也没有找到相关的配置,应该是这个插件在将markdwon语法转换成html的过程里存在bug,多生成了一个空行。

我用chrome开发者工具检查了这些多出……

阅读更多

解决src相同但src对应的图片发生变化后页面没有更新的问题

之前在做一个用户维护个人信息的页面时,发现当用户上传新的头像后,我用js去更新img的src属性,页面上却仍然显示原来的头像。

图片上传成功后,img的src值不变,但是对应的图片已经改变了。
获取图片的src请求如下:

<img src="xxx/public/api/getUserPhoto?userId=12345"></img>

此时按道理从后端再发一次请求的话,是能够获取最新的图片的。

后来上网查了资料,发现是因为当img的src没有变化时,浏览器不会重新发送src对应的请求去加载图片,而是直接使用缓存里的图片,即之前的头像。

解决的方法很简单,在……

阅读更多