为什么我的脚本会间歇性地失败? [英] Why is my script failing intermittently?

问题描述

我有这个jQuery插件，名为 Easy Slider 此网站上实现的a>，该网站以动画幻灯片格式显示特色内容.

I have this jQuery plugin called Easy Slider which I'm implementing on this site which displays featured content in animated slide format.

如果您访问该网站，您会发现主页上有一个基本的实现，在 Rods页面上进行了调整.在Rods页面上，只是我使用了11个实际滑块的实例.

If you visit the site, you'll see there's a basic implementation on the home page, and a little more tweaked version on the Rods page. On the Rods page it's just that I'm using 11 instances of the actual slider.

该东西最初仅用于一个实例，但是在更高版本中增加了多幻灯片功能.直到今天，所有内容在首页上都运行良好.今天，我在Rods页面上实现了11个实例(使用它来展示客户产品的画廊风格图像).为了实现多个实例，我必须给每个幻灯片容器一个具有唯一ID的名称，然后传递参数以更改jQuery生成的上一个"和下一个"按钮标记.

The thing was originally built for just one instance, but the multiple slides functionality was added in a later version. So all was working well on the homepage until today. Today I implemented the 11 instances on the Rods page (using it to show off gallery style images of the client's product). In order to implement multiple instances, I had to give each slide container a name with a unique ID, and then pass parameters to alter the jQuery generated "previous" and "next" button markup also.

标记是这样的:

<div id="slider-1">
    <ul>
        <li><img src="/img/rod.jpg" /></li>
        <li><img src="/img/rod.jpg" /></li>
        <li><img src="/img/rod.jpg" /></li>
    <ul>
</div>

然后，脚本在每个幻灯片div之后生成两个<span>元素，如下所示:

And then the script generates two <span> elements after each slide div that look like this:

<span id="nextBtn"><a href="#">next</a></span>
<span id="prevBtn"><a href="#">previous</a></span>    

至少可以说真的很挑剔.我几乎要为此扯掉头发，因为发生的事情对我来说毫无意义.

It has been really finicky to say the least. I'm nearly pulling my hair out over this because what's happening just doesn't make any sense to me.

这是我一直在经历的疯狂...

Here's some of the craziness I've been experiencing...

• 实施了多张幻灯片，并进行了一些样式调整之后，我在Firefox中看起来一切正常.我去Chrome浏览器检查了一下，在那里我有一个较旧的页面版本，刷新后我的所有脚本都没有执行.回到FF，刷新后该浏览器中的脚本没有执行，尽管刷新之间我根本没有更新代码.此外，我检查了错误控制台，没有列出任何错误.
• 回到我的代码，通过查看我的本地副本和实时服务器副本进行比较以进行比较，没有差异.因此，刷新了几次，并清除了缓存，仍然一无所获.然后离开我的计算机，转过头来，回来，刷新并重新运行jQ脚本！ (顺便说一句，不仅EasySlide脚本受到影响，而且页脚之后我立即拥有的用于淡入/淡出导航滚动的脚本也是如此.)
• 再次在Chrome中刷新，这一次我遇到了一种奇怪的行为，其中包含div的行内高度被应用，我不确定它的起源.奇怪的是，浏览器之间的外观也有所不同.在Chrome中，每个项目看起来像:height:21px;.在Firefox中，列表的第一张幻灯片的外观为height:271px，列表中的其他幻灯片的外观为height:0px.不知道这是从哪里来的或为什么. 尽管，现在我正在写这个，但我想知道我的标记是否存在问题，我必须在<ul>中使用<div>吗?
• 最后，最近一次，我在每个浏览器上都进行了刷新(并从Macbook中进行了检查)，脚本再次没有执行.

• Implemented the multiple slides and after some style tweaking I got everything looking and working properly in Firefox; Went to check it in Chrome, where I had an older version of the page up and upon refresh none of my scripts were executing. Went back to FF and upon refresh the scripts in that browser were not executing, although I had not updated the code at all between the refreshes. Further, I checked my error console and there were no errors listed.
• Went back to my code and double checked by looking at my local copy and the live server copy to compare, no differences. So refreshed a few times and cleared the cache and still nothing. Then walked away from my computer to hit the head, came back, refreshed and the jQ scripts were running again! (BTW, not only the EasySlide scripts being affected, but also a script I have immediately after the footer to fade in/out the nav rollover).
• Refreshed in Chrome again, and this time I'm getting a strange behavior where the containing div has an inline height being applied that I'm not sure where it originates. Strangely enough, it looks different between browsers, too. In Chrome, it looks like: height:21px; for each one of the items. In Firefox, it looks like height:271px for the first slide in the list, and height:0px for every other slide in the list. No clue where this is coming from or why. Although, now that I'm writting this, I'm wondering if it's an issue with my markup where I had to use <div> inside an <ul>?
• Finally, most recently I refreshed again on each browser (and checked also from my Macbook) and again the scripts are not executing.

也许有这么多问题，我无法确定这里正在发生什么.如果您能告诉我，我将不胜感激.

Perhaps there are just so many issues that I can't identify what is happening here. I would greatly appreciate another perspective if you can tell...

1. 您看到了什么-每个杆发布仅一个静态图像，还是一组带有左右木三角按钮的滑动图像?
2. 为什么这些脚本会间歇性地失败?
3. 图像窗口是否在浏览器中全部显示完整的高度?如果没有，您是否看到了内联样式以及它的来源.

很抱歉，此处的篇幅太长了，如果其中的大部分是由于缺乏对javascript的经验而造成的.我认为自己对HTML& CSS，但非常适合使用JS.因此，非常感谢任何相关的投入.

推荐答案

我在两个页面上都看到了单个图像，并且PHP试图从底部的Twitter处获取内容时出现了一些错误，似乎页面过早地结束了.也许您在页面底部某处有该脚本的调用代码，但由于脚本爆炸而无法运行?

I see single images on both pages and some errors from PHP trying to fetch content from Twitter at the bottom, seemingly ending the page prematurely. Perhaps you have invocation code for the script somewhere at the bottom of the page, that isn't getting run because the script bombs out?

每次与外部资源建立连接时，都应该为它做好准备，并在每个步骤中使用检查和/或异常捕获以确保它确实失败了，从而不会破坏整个脚本

Any time you make a connection to an external resource you should be prepared for it to fail, and use checking and/or exception-catching at each step to ensure that if it does fail, it doesn't bomb your whole script.

也许Twitter连接失败是因为您为页面的每次点击都建立了新的连接?这很容易产生许多服务运营商认为滥用的请求泛滥.因此，Twitter可能故意阻止或限制来自服务器的访问.

Perhaps the Twitter connection is failing because you're making a new connection to them for every single hit to your pages? That can easily generate the kind of request flooding that many service operators would consider abusive. Twitter may be deliberately blocking or throttling access from your server for this reason.

为避免过多地冲击服务器，并总体上提高了页面生成的速度，应限制对Twitter的请求数量，因此，您只能每隔一段时间获取一次新信息，并存储一个缓存的信息.数据库中的版本，否则返回.

Both to avoid hitting their server so much, and to improve the speed of your page generation in general, you should limit the number of requests you make to Twitter, so you only fetch new information every so often, and store a cached version in the database to return otherwise.

这篇关于为什么我的脚本会间歇性地失败?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！