دستوری که بعد از 5 ثانیه اجرا شود

[alasht]

با سلام خدمت دوستان
من چطوری میتونم یه دستور بنویسم که بعد از 5 ثانیه اجرا بشه
مثلا میخوام یه دستور بنویسم وقتی رو دکمه مورد نظرم کلیک شد بعد از 5 ثانیه یه پیغام نشون بده
به این صورت


<button>Click Me !</button>
<script type="text/javascript">
$(document).ready(function () {
$("button").click(function () {
alert("welcome");
});
});
</script>


میخوام در رویداد کلیک دستوری بنویسم که بعد از 5 ثانیه پیغام welcome ظاهر بشه
ممنون میشم دوستان راهنمایی کنند

[hossin.esm]

<button>Click Me !</button>
<script type="text/javascript">
$(document).ready(function () {
$("button").click(function () {
setTimeout("alert('welcome')",5000);
});
}); </script>

[alasht]

خیلی ممنون
فقط یه سوال کوچیک دیگه داشتم ممنون میشم اینم چواب بدید

فرض کنید یه دکمه ساختم که با کلیک روی اون یه div ساخته میشه حالا میخوام کاری کنم که اگه خارج از div مورد نظر کلیک شد یه پیغام بده
کدش هم اینه

<button>Click Me !</button>
<div id="test"></div>
<script type="text/javascript">
$(document).ready(function () {
$("button").click(function () {
$("#test").append("<div style='width:50px;height:50px;background-color:red'>my div</div>");
});
});
</script>

[hossin.esm]

شاید راحت تر از این هم بشه.



<button>Click Me !</button>
<div id="test" ></div>
<script type="text/javascript">
var t=false;
$(document).ready(function () {

$("button").click(function (e) {

$("#test").append("<div id='d' style='width:50px;height:50px;background-color:red;'>my div</div>");
t=false;
});
$(document).click(function (e) {

if(t)
{ var p=$("#d").position();
var w=$("#d").width();
var h=$("#d").height();
if((e.pageX<p.left || e.pageX>(p.left+w)) || (e.pageY<p.top || e.pageY>(p.top+h)) )
{
alert('error');
}
}
t=true;
});
});

</script>

[mehdi.mousavi]

شاید راحت تر از این هم بشه.

سلام.
البته که میشه:

$(function () {
$(document).click(function () {
alert('outside of myElement');
});

$('#myElement').click(function (e) {
alert('inside myElement');
return false;
});
});


موفق باشید.

[alasht]

ممنون اقا موسوی
من این رو قبلا نوشته بودم اما return false رو نداشت و به خاطر همین وقتی رو المنت مورد نظر کلیک می کردم هر دو دستور با هم اجرا میشد
ممنون میشم بفرمایید کار return false چیکار میکنه که باعث شد کدم درست عمل کنه ؟
با تشکر فراوان

[mehdi.mousavi]

ممنون اقا موسوی من این رو قبلا نوشته بودم اما return false رو نداشت و به خاطر همین وقتی رو المنت مورد نظر کلیک می کردم هر دو دستور با هم اجرا میشد ممنون میشم بفرمایید کار return false چیکار میکنه که باعث شد کدم درست عمل کنه ؟
با تشکر فراوان

سلام.
دقیقا return false نکته کلیدی این کد هستش. وقتی از داخل یک Event Handler ای در jQuery مقدار false رو برمیگردونید، به jQuery دارید میگید که مایلید Event مزبور Bubble نشه و به سطح بالاتر نره. انتشار هر Event ای در DOM Level 2 Event Model دو بار رخ میده: یک بار هنگامیکه Event از DOM Element پدر به دست Element فرزند میرسه، یکبار هم مسیر برگشت. یعنی از child element ها به parent element ها. به اولی میگن فاز Capture و به دومی میگن Bubble.

اون return false ای که گذاشتم به jQuery میفهمونه که:


propagation اون event انجام نشه.
default behavior اون event نادیده گرفته بشه.

بدین ترتیب دیگه event به دست parent اون element نمیرسه و کد طبق خواسته کار میکنه. :) شکل زیر (از کتاب jQuery in Action) نیز نحوه انتشار Event ها رو نشون میده (برای اینکه یادتون بمونه این شکل رو ضمیمه کردم).

67265

موفق باشید.

[alismith]

سلام

یه سوال اون e چه کاربردی داره؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟
با تعریف پارامتر برای تابع فرق می کنه؟؟؟؟؟؟؟؟؟؟؟؟؟
الان تو این دستور کجا استفاده داشته؟؟؟؟؟؟؟؟؟؟؟؟

خیلی ممنون

[mehdi.mousavi]

سلام یه سوال اون e چه کاربردی داره؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟ با تعریف پارامتر برای تابع فرق می کنه؟؟؟؟؟؟؟؟؟؟؟؟؟ الان تو این دستور کجا استفاده داشته؟؟؟؟؟؟؟؟؟؟؟؟ خیلی ممنون


سلام.
من ازش استفاده ای نکردم و نیازی هم نبوده بنویسمش. میشه حذفش کرد. اما اینکه چی هستش: در JavaScript وقتی Handler ای برای Event ای تعریف می کنید، هنگام فراخوانی اون Handler، یک instance از Event بدست Handler شما میرسه. پردازش اون instance، کاملا browser-specific هستش و در مرورگرهای مختلف، متفاوته. بنابراین در کدهای JavaScript عموما چنین بخش هایی دیده میشه:

this.onclick = function(event) {
if (!event) {
event = window.event;
}

var target = (event.target) ? event.target : event.srcElement;
}

چون اون نمونه از event در IE و بقیه Browser ها متفاوته، مجبور هستیم با نوشتن کد Boilerplate ای به event اصلی برسیم. اما داستان به همین جا ختم نمیشه. چند خط پایین تر، به نحوه بدست آوردن target دقت کنید. برخی از مرورگرها، property ی target رو روی event object عرضه میکنن، اما برای برخی دیگه مجبورید از srcElement استفاده کنید. حالا در jQuery، کل روند تعامل با رخدادها، Unified شده.

در jQuery، اون event همون Event Instance مرورگر هستش، اما jQuery سعی میکنه کلیه property های مهم رو بر اساس browser در event object قرار بده تا بصورت استاندارد و یک شکل، در دسترس باشه تا دیگه نیازی به نوشتن کد فوق نباشه. روی این object، خصیصه هایی وجود داره که Safe Property های اون عبارتند از:

altKey, ctrlKey, data, keyCode, metaKey, pageX, pageY, relatedTarget, screenX, screenY, shiftKey, target, type, which

حالا هر کدوم از این property ها، برای کاربرد خاصی مفید هستن. فرضا، وقتی کلیدی توی TextBox زده میشه، شما می تونید با رجوع به e.which در handler مورد نظر، کد ASCII ی کلید فشرده شده رو بدست بیارید بدون اینکه کد مجزایی برای مرورگرهای متفاوت بنویسید.

موفق باشید.