循环调用问题

最新推荐文章于 2024-07-21 18:32:24 发布

jh2k

最新推荐文章于 2024-07-21 18:32:24 发布

阅读量1.2k

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/sinat_33202972/article/details/79731866

版权

https://developer.mozilla.org/zh-CN/docs/Glossary/%E7%AB%8B%E5%8D%B3%E6%89%A7%E8%A1%8C%E5%87%BD%E6%95%B0%E8%A1%A8%E8%BE%BE%E5%BC%8F

IE9 以上直接links.forEach(function (link, i) {
  link.onmouseover = ...
})
当然 links 可能是通过 querySelectorAll 返回的，那就只能Array.prototype.forEach.call(links, function (link, i) {
  // ...
})

用IIFE就解决了：for (var i=0;i<=2;i++) {
  links[i].onmouseover = (function () {
    var j = i;
    return function() {
      moveElement("preview", -100 * j - 100, 0, 10)
    }
  })()
}
关键点在于作用域——要通过创建新的变量捕获i的当前值，而JavaScript的var声明的局部变量只有全局和函数两个级别的作用域而没有块作用域，所以这里就用IIFE弄一个新的函数作用域来创建新变量。觉得IIFE不爽的话用Array.prototype.forEach可以在回调里得到index，回调函数自身有新的作用域所以也就OK。ES6的话用let也可以达到目的，就不用IIFE这么麻烦了：function foo() {
  var result = []
  for (let i = 0; i < 3; i++) {
    //let j = i
    result.push(function () { return i })
  }
  return result
}

var a = foo()
console.log(a[0]()) // 0
console.log(a[1]()) // 1
console.log(a[2]()) // 2