随笔分类 - javascript
摘要：背景 在实际开发中，移动端页面遇到的，采用正常写法，图片 src赋值写在 onload 事件监听 后面，依然会有拿不到 图片真实宽高的场景，获得的图片宽高都为0，真的是好坑啊。 var img_url = '.jpg' // 创建对象 var img = new Image() // 加载完成执行
阅读全文
摘要：背景 移动端页面使用了 swiper，实现两屏轮播上下滚动，在 iOS 手机上用手滚动轮播图的时候，会发生下拉或上拉都有空白出现。 解决方案 初始化 swiper实例，传入以下参数。 resistanceRatio：抵抗率。边缘抵抗力的大小比例。值越小抵抗越大越难将slide拖离边缘，0时完全无法拖
阅读全文
摘要：背景 在很久以前，有写过一个使用 js 实现单张图片持续滚动图片的 代码，但那一版实现会持续操作DOM，向DOM中插入元素，性能较差，最近发现 requestAnimationFrame 通过 动画的方式实现图片滚动更加方便，遂重新实现了一版，效果更赞，性能更好。 效果如下 需求描述 需要单张图片在
阅读全文
摘要：我们查看官方文档，只有通过<script>标签引入swiper轮播库的方法，如果我们想要在js中通过npm包的方式安装和导入，参考以下方法： 官方文档：https://www.swiper.com.cn/ npm文档：https://www.npmjs.com/package/swiper npm包
阅读全文
摘要：背景 在开发过程中，明明调试好的阻止冒泡没有问题，但是真正使用 时候发现阻止冒泡失效了，原来原因是点击事件里依赖了异步返回结果。 正常阻止冒泡写法 <div class="aa notice"> <div class="bb notice"></div> </div> <script> var ar
阅读全文
摘要：// 闭包的使用场景：一个方法要被多次调用，并且共享一个数据 // 防抖和节流 // 自执行函数省去单独调用一次 let addEvent = (function() { let obj = {}; return function(eventName,fns){ if(obj[eventName]
阅读全文
摘要：概念理解 防抖：在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。 节流：规定在一个单位时间内，只能触发一次函数。如果这个单位时间内触发多次函数，只有一次生效。 js函数防抖与节流的区别： 函数防抖是某一段时间内只执行一次，而函数节流是间隔时间执行。 个人踩坑 1、通过理解函数防抖与
阅读全文
摘要：背景： 想要实现图片持续滚动，既然使用js,就千万不要加css动画、过渡等相关样式，如果想要滚动的平滑一下，可以一像素一像素的感动，则很平滑，如果加了过渡动画，当图片重置为0时，会有往回倒的动画效果，跟预期不符。 原理： 图片滚动原理同图片轮播原理，同样也适用于文字滚动等一系列滚动，通过复制最后一张
阅读全文
摘要：需求：有一个图片列表，我想要在图片onload成功之后获取加载成功的图片列表，图片资源加载为异步，我们使用ES7的async await方式实现，多张图片，是用for循环。 注意：图片加载失败一定要加监听，await只有在有返回之后才会继续向下执行，无论成功与失败，否则第一张图加载失败，下面的awa
阅读全文
摘要：问题： setInerval实现图片滚动，离开页面后又返回页面时图片加速滚动 代码本身实现方案： 在每次页面加载的时候会清除定时器。 问题产生原因： 由于在加载了图片滚动的页面之后，又去到了其他页面，但是定时器没有停止，而页面又没有显示在用户面前，当返回页面的时候，就会把之前定时器中已经移动的图片动
阅读全文
摘要：参考链接：https://blog.csdn.net/zhenyu5665/article/details/72829971 var fileName = "www.aaa.com/index.html"; 方法1 var fileExtension = fileName.substring(fil
阅读全文
摘要：工作中会遇到低版本安卓设备调用setTimeout不生效，既不会报错，里面的函数也不会执行，这里po一个解决办法，如果不执行则执行安卓自己封装的原生的setTimeout方法：sdk.setTimeout。 注明：此方法为我们老大所写，放在这里惠存一下。 基本方案/*******/ (functio
阅读全文
摘要：大家有时候有需求在屏幕方向改变的时候重新执行某个渲染函数，以获取方向改变后的实际宽高，但是首次加载的执行函数要在其他地方执行，这时候可以加一个flag的状态值，默认为false，当第一次检测到方向改变的时候再改为true。 这里有一篇比较好的相关文章推荐：https://div.io/topic/1
阅读全文
摘要：如何这篇文章所述：https://www.cnblogs.com/mmykdbc/p/7418575.html js多次调用创建定时器的函数，会使定时器速度越来越快，多次调用定时器的使用场景比如：监听页面尺寸变化，重新初始化定时器函数，但是如果不清除上一次的，定时器实际上会累加在一起，这里需要注意：
阅读全文
摘要：js通过事件代理的方式绑定跳转事件，我这里的逻辑是把click事件绑定在最外层container上面，如果e.target包含我已经写好的class，则执行跳转逻辑。但是这种方式好像只能是在点击的元素的上面，也就是最内层的元素上面有相应的class才能跳转，在外层加同样的class不生效，说明是我对
阅读全文
摘要：js实现定时器的另一种方式，但是感觉跟写setInterval差不太多，都有可能导致堆栈溢出的问题。不建议代码中使用。
阅读全文
摘要：es6导入： 在js文件顶端 commonjs导入： 在js文件顶端： 如果不定义Swiper名称，则会报错：
阅读全文
摘要：runTest("b* 1", function() { b * 1; }); 综上比较， 1、本身是数字的字符串转为数字，parseInt()不带参数直接转最快； 2、字符串既包含数字又包含字母的字符串，parseInt()带10进制的参数更快，但是是所有方法中最慢的； 3、如果是纯数字组成的字符
阅读全文
摘要：报错信息： Symbol.iterator is not a function [duplicate] 代码示例： 分析原因： DOM获取的nodeList类似数组，但是不是数组，直接用for of循环确实可以遍历，但是在iphone5下回报错，所以需要转为真正的数组。 解决方案： 如上面代码，加了
阅读全文
